HTML Lesson 1
E N D
Presentation Transcript
HTML Lesson 1 The Basics of HTML
Prerequisites Before beginning this lesson, the student must be able to… • Access web pages and navigate the web • Use search engines to locate specific information • Download graphics from web pages
Objectives • After completing this lesson, the student will be able to… • View the source of any web page • Name and explain the uses of basic HTML tags: <HTML></HTML><HEAD></HEAD><TITLE></TITLE> <BODY></BODY><B></B><I></I><HR><BR><IMG...> <P></P><UL></LI></UL>, links (awareness), header sizes • Gather text and graphic information about a topic • Create a simple web page using a word processing program or a text editor • Display the web page using a browser
Purpose of this Lesson • You will be exposed to a lot of new information in this lesson. • The actual purpose is to help you begin to recognize the structure of HTML. • Do not try to memorize the information you see. You can always refer to an HTML reference list.
What is HTML? • HTML stands for HyperText Markup Language • It is the set of instructions hidden behind every web page (called the source of the page) • HTML “tags” tell the browser (like Internet Explorer) how to display the page. • For example, <B>HI THERE</B> would display the words HI THERE in bold.
What is HTML? • HTML “tags” are contained within < > • The letters inside the < > are the instructions (like <B> for bold) and may be upper or lower case. • Tags often come in pairs…one to begin a feature, and another to end it. • In the previous example, <B> means “begin bold here” and </B> means “end bold here”.
HTML Structure • Each web page has a HEAD and a BODY. • All web pages have required tags like these: <HTML> {begin the page} <HEAD> {some set up instructions </HEAD> are here} <BODY> {the main part of the page </BODY> is here} </HTML> {end the page}
HTML Structure • The HEAD section often contains tags to display a page title. • The title is displayed at the top of the window (not on the page). • Here is an example: <HEAD> <TITLE>My Web Page</TITLE> </HEAD> My Web Page
HTML Structure • The BODY section contains all the instructions for the actual page display. • Inside the body section of a web page you will find tags that control text, graphics, lines, links, tables and other special functions. • Remember that some, but not all, tags come in pairs.
Text-Related Tags • Text is most often displayed in paragraphs, using block form (no indentation, blank line between paragraphs). • The paragraph tags <P> and </P> are used before and after a paragraph. • <BR> (“line break”) is like pressing Return/Enter. The text that follows is displayed on the next line. • NOTE: Just pressing Return/Enter when you are writing a page in HTML does not guarantee that it will be displayed on the next line.
Text-Related Tags • Text is sometimes displayed in BOLD or ITALICS. • The tag pair <B> and </B> make the text between display in bold. • The tag pair <I> and </I> make the text between display in italics. • Examples: • <B>This is bold text.</B> This is bold text. • <I>Here is italics.</I> Here is italics. • <B><I>Both!</I></B> Both!
Text-Related Tags • NOTE: Though there is a tag for underlining (<U> </U>) it is not a good idea to underline text. It may be confused with a link, since they are usually underlined. • The <FONT> </FONT> tag pair can be used to change other aspects of text (e.g., color). It will be presented in a later chapter.
Text-Related Tags • You will often see text displayed in large, bold type, almost like a newspaper headline. • The “header” tags are used for this purpose. • The largest “header” tag is <H1> </H1> (larger numbers make smaller headers). • An example: <H1>MY PAGE</H1> displays MY PAGE • <H6>MY PAGE</H6> displays MY PAGE
Text-Related Tags • To center a header, the tag pair <CENTER> </CENTER> is used. • An example: <CENTER> <H1>TRAINS</H1> </CENTER> displays… TRAINS
Lines • Many web pages use horizontal lines to divide the page. • The <HR> tag is used to draw a line. • You can control the size (thickness in pixels) and width (% of the window). • Examples: • <HR> {one pixel thick, 100% of window} • <HR SIZE=4 WIDTH=50%> {4 pixels thick, 50% of window}
IMAGE Tags • The <IMG> tag is used to display graphics on web pages. • The main requirement for the IMG tag is the file name (“source”) of the image. • NOTE: Web page images DO NOT become part of a web page file. They are separate files and must be located in the same folder as the web page file unless otherwise noted.
IMAGE Tags • An example of an IMG tag that displays a graphic called ME.JPG <IMG SRC=“ME.JPG”> • In the example above, the name (“source” or SRC) of the picture file is ME.JPG (stored in the same folder as the web page file). • NOTE: The image file’s name must be exactly as stored (upper/lower case, etc.) • .JPG and .GIF indicate types of images appropriate for web pages. Web graphics will be discussed in more detail in a later lesson.
Lists • Many web pages contain lists, much like you see in this PowerPoint presentation. • Lists can be “unordered” (using bullets like this list) or “ordered” (with numbers or letters). • <UL> </UL> indicates an unordered (bulleted) list. • <OL> </OL> indicates an ordered list. • <LI> </LI> is used for each list item.
List Examples These tags… • <UL> • <LI>Dogs</LI> • <LI>Cats</LI> • <LI>Lizards</LI> • </UL> Produce this list… • Dogs • Cats • Lizards
List Examples These tags… • <OL> • <LI>Dogs</LI> • <LI>Cats</LI> • <LI>Lizards</LI> • </OL> Produce this list… • Dogs • Cats • Lizards
List Examples These tags… • <OL TYPE=“A”> • <LI>Dogs</LI> • <LI>Cats</LI> • <LI>Lizards</LI> • </OL> Produce this list… • Dogs • Cats • Lizards
A Word about Links • You will find out much more about links in a later lesson, but for now, I want you to be able to recognize links. • All links use the tag that begins <A HREF= • The A stands for “anchor” (think of an anchor chain..it’s made of links…right?). • The HREF part will be the name of a web page or a web address.
A Word about Links • Here are a couple of examples, you will see the actual message to click on between the “A” tags. • This link shows the words Go Back and sends the user to a page called HOME.HTM that is stored in the same folder as the current page. <A HREF=“HOME.HTM”>Go Back</A>
A Word about Links • This link shows the words More Info and sends the user to the CSUDH College of Education home page. <A HREF=“http://www.csudh.edu/coe/”>More Info</A> • As you complete the activities on the last slide, look for link tags (as well as other tags).
Self Check - HTML Lesson 1 • Which of the following is NOT a required tag? • <HTML> • </BODY> • <H1> • <HEAD>
Self Check - HTML Lesson 1 • Which of the following is NOT a required tag? • <HTML> • </BODY> • <H1> {headings/headlines are common, but not required} • <HEAD>
Self Check - HTML Lesson 1 • Which of the tags below will show the words MY PAGE on the page in very large type? • <TITLE>MY PAGE</TITLE> • <H1>MY PAGE</H1> • <H7>MY PAGE</H7> • <FONT SIZE=2>MY PAGE</FONT>
Self Check - HTML Lesson 1 • Which of the tags below will show the words MY PAGE on the page in very large type? • <TITLE>MY PAGE</TITLE> • <H1>MY PAGE</H1> {H1 shows the largest “headline”} • <H7>MY PAGE</H7> • <FONT SIZE=2>MY PAGE</FONT>
Self Check - HTML Lesson 1 • Which set of tags below would display this text in italics and bold: CLICK HERE • <I><B>CLICK HERE</I></B> • <I><B>CLICK HERE</B></I> • <B>CLICK HERE</B> • <H1>CLICK HERE</H1>
Self Check - HTML Lesson 1 • Which set of tags below would display this text in italics and bold: CLICK HERE • <I><B>CLICK HERE</I></B> • <I><B>CLICK HERE</B></I> * • <B>CLICK HERE</B> • <H1>CLICK HERE</H1> *Explanation: Tags must be “nested” - the first to be turned on must be the last to be turned off.
Self Check - HTML Lesson 1 • To put a blank line after typing… • <BR> • <P> and </P> • Just press Return/Enter • Either <BR> or <P></P> will work.
Self Check - HTML Lesson 1 • To put a blank line after typing… • <BR> • <P> and </P> • Just press Return/Enter • Either <BR> or <P></P> will work.
Self Check - HTML Lesson 1 • Which the the following makes a “numbered” list (1., 2., etc.)? • <OL></OL> • <LI></LI> • <UL></UL> • <NL></NL>
Self Check - HTML Lesson 1 • Which the the following makes a “numbered” list (1., 2., etc.)? • <OL></OL> {a numbered list is an “ordered” list} • <LI></LI> • <UL></UL> • <NL></NL>
Self Check - HTML Lesson 1 • To draw a line across the web page, use… • <HR> • <LINE> • <LI></LI> • Must use a graphic.
Self Check - HTML Lesson 1 • To draw a line across the web page, use… • <HR> {a line is a “horizontal rule”} • <LINE> • <LI></LI> • Must use a graphic.
Self Check - HTML Lesson 1 • Which of the following displays the words CLICK ME as a link to homepage.htm? • <LI “homepage.htm”>CLICK ME</LI> • <LI “CLICK ME”>homepage.htm • <A HREF=”homepage.htm”>CLICK ME</A> • <LINKTO “homepage.htm”>CLICK ME
Self Check - HTML Lesson 1 • Which of the following displays the words CLICK ME as a link to homepage.htm? • <LI “homepage.htm”>CLICK ME</LI> • <LI “CLICK ME”>homepage.htm • <A HREF=”homepage.htm”>CLICK ME</A> • <LINKTO “homepage.htm”>CLICK ME
Activities • Check out the handout at http://www.csudh.edu/fisher/tbe540/HHO1.htm (as a review of this lesson). • Try the hands-on exercise at http://www.csudh.edu/fisher/tbe540/HEX1.htm
