1 / 39

HTML Lesson 1

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.

sheena
Download Presentation

HTML Lesson 1

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML Lesson 1 The Basics of HTML

  2. 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

  3. 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

  4. 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.

  5. 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.

  6. 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”.

  7. 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}

  8. 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

  9. 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.

  10. 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.

  11. 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!

  12. 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.

  13. 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

  14. Text-Related Tags • To center a header, the tag pair <CENTER> </CENTER> is used. • An example: <CENTER> <H1>TRAINS</H1> </CENTER> displays… TRAINS

  15. 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}

  16. 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.

  17. 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.

  18. 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.

  19. List Examples These tags… • <UL> • <LI>Dogs</LI> • <LI>Cats</LI> • <LI>Lizards</LI> • </UL> Produce this list… • Dogs • Cats • Lizards

  20. List Examples These tags… • <OL> • <LI>Dogs</LI> • <LI>Cats</LI> • <LI>Lizards</LI> • </OL> Produce this list… • Dogs • Cats • Lizards

  21. List Examples These tags… • <OL TYPE=“A”> • <LI>Dogs</LI> • <LI>Cats</LI> • <LI>Lizards</LI> • </OL> Produce this list… • Dogs • Cats • Lizards

  22. 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.

  23. 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>

  24. 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).

  25. Self Check - HTML Lesson 1 • Which of the following is NOT a required tag? • <HTML> • </BODY> • <H1> • <HEAD>

  26. 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>

  27. 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>

  28. 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>

  29. 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>

  30. 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.

  31. 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.

  32. 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.

  33. Self Check - HTML Lesson 1 • Which the the following makes a “numbered” list (1., 2., etc.)? • <OL></OL> • <LI></LI> • <UL></UL> • <NL></NL>

  34. 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>

  35. Self Check - HTML Lesson 1 • To draw a line across the web page, use… • <HR> • <LINE> • <LI></LI> • Must use a graphic.

  36. 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.

  37. 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

  38. 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

  39. 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

More Related