Download - HTML Introduction
![Page 1: HTML Introduction](https://reader035.vdocument.in/reader035/viewer/2022062410/568165f9550346895dd92655/html5/thumbnails/1.jpg)
HTML Introduction
![Page 2: HTML Introduction](https://reader035.vdocument.in/reader035/viewer/2022062410/568165f9550346895dd92655/html5/thumbnails/2.jpg)
HTML: The Language of the Web
Web pages are text files, written in a language called Hypertext Markup Language or HTML.
A markup language is a language used to describe the contact and format of documents.
HTML was developed from the Standard Generalized Markup Language (SGML), a language used for large-scale documents.
SGML proved to be cumbersome and difficult, thus HTML was created.
![Page 3: HTML Introduction](https://reader035.vdocument.in/reader035/viewer/2022062410/568165f9550346895dd92655/html5/thumbnails/3.jpg)
Tools for Creating HTML Documents HTML documents are text files, which a text
editor such as Windows NotePad can be used to create.
You can also use an HTML converter or an HTML editor. an HTML converter like Microsoft Word
takes text in one format and converts it to HTML code
an HTML editor helps you create an HTML file by inserting HTML codes for you as you work
![Page 4: HTML Introduction](https://reader035.vdocument.in/reader035/viewer/2022062410/568165f9550346895dd92655/html5/thumbnails/4.jpg)
Creating an HTML Documentheading 1
image
horizontal lineparagraph
list
bold and italic text
heading 3
It’s always a good idea to plan the appearance of your Web page before you start writing code.
![Page 5: HTML Introduction](https://reader035.vdocument.in/reader035/viewer/2022062410/568165f9550346895dd92655/html5/thumbnails/5.jpg)
HTML Syntax Document content is what the
users sees on the page, such as headings and images.
Tags are the HTML codes that control the appearance of the document content. tag is the name of the HTML tag attributes are properties of the tag document content is actual content
that appears in the Web page
![Page 6: HTML Introduction](https://reader035.vdocument.in/reader035/viewer/2022062410/568165f9550346895dd92655/html5/thumbnails/6.jpg)
HTML Tags Tags can be one-sided or two-sided.
two-sided tags contain an opening tag <b> that tells the browser to turn on a feature and apply it to the contact that follows, and a closing tag </b> that turns off the feature
one-sided tags are used to insert noncharacter data into the Web page, such as a graphic image or video clip <tag attribute>
Tags are not case sensitive. The current standard is to display all tags in lowercase letters.
![Page 7: HTML Introduction](https://reader035.vdocument.in/reader035/viewer/2022062410/568165f9550346895dd92655/html5/thumbnails/7.jpg)
HTML Tag Format1. Tags can always be identified by the Brackets < > that enclose the tag name
2. Opening Tag < > tells the browser to turn on the feature • Tag Name – macro-like feature• Properties – additional information placed within brackets that
control how the tag is used
3. Closing Tag </ > tells the browser to turn off the feature
<Tag Name Properties> Document Content </Tag Name>
Example: <h1>Mr. Dube’s Chemistry Classes</h1>
![Page 8: HTML Introduction](https://reader035.vdocument.in/reader035/viewer/2022062410/568165f9550346895dd92655/html5/thumbnails/8.jpg)
Initial HTML Tags <html><head><title> Web Page Name </title></head><body>
Document Content
</body></html>
![Page 9: HTML Introduction](https://reader035.vdocument.in/reader035/viewer/2022062410/568165f9550346895dd92655/html5/thumbnails/9.jpg)
Saving and Displaying Web Page1. Start Notepad2. Create Initial Tags
• After the <body> tag add:• Your Name• Your Major• “This is my first web page that I’ve created
using HTML and Notepad. After I create this page, I’ll save it as an example of HTML coding.”
3. Save-As First_Program.htm (typically you will save in your wwwpub folder)
4. Close file and exit Notepad5. Open the Internet Explorer file
![Page 10: HTML Introduction](https://reader035.vdocument.in/reader035/viewer/2022062410/568165f9550346895dd92655/html5/thumbnails/10.jpg)
Making Changes to Web Pages1. Open your Internet Explorer file (First_Program.htm) 2. Select View3. Select Source (opens Notepad)4. Make the desired changes in Notepad5. Save HTML changes in Notepad6. View the changes by selecting Refresh on the Internet
Explorer screen7. Close Notepad and Internet Explorer
Note: Always save Notepad DO NOT save the Internet Explorer pages
![Page 11: HTML Introduction](https://reader035.vdocument.in/reader035/viewer/2022062410/568165f9550346895dd92655/html5/thumbnails/11.jpg)
Creating Heading Tags HTML supports six levels of headings,
numbered <h1> through <h6>, with <h1> being the largest and most prominent.
Headings are always displayed in a bold font.
![Page 12: HTML Introduction](https://reader035.vdocument.in/reader035/viewer/2022062410/568165f9550346895dd92655/html5/thumbnails/12.jpg)
Entering Heading Tags and Text
heading tags
As of HTML 3.2, the heading tag can contain additional attributes, one of which is the alignment attribute.
![Page 13: HTML Introduction](https://reader035.vdocument.in/reader035/viewer/2022062410/568165f9550346895dd92655/html5/thumbnails/13.jpg)
Headings As They Appear in the Browser
<h1>
<h2>
<h3>
![Page 14: HTML Introduction](https://reader035.vdocument.in/reader035/viewer/2022062410/568165f9550346895dd92655/html5/thumbnails/14.jpg)
Header Examples
![Page 15: HTML Introduction](https://reader035.vdocument.in/reader035/viewer/2022062410/568165f9550346895dd92655/html5/thumbnails/15.jpg)
Paragraphs <html>
<head><title> Mr. Dube’s Chemistry Class </title></head>
<body><h1 align=“center”>Mr. Dube’s Chemistry Classes</h1><h2 align=“center”>at Robert Service High School</h2> <p>Welcome to Mr. Dube’s Web Site. I hope you will use this site to learn more about your class, my expectations, and chemistry in the world around you.</p><h2 Chemistry Classes</h2> <h2>Class Policies</h2><h3>Grading</h3><h3>Appointments</h3><h3>Safety</h3> </body>
</html>
If you are using a test editor like NotePad, the text might not wrap to the next line automatically.
Selecting the Word Wrap command within NotePad will allow you to see all the text on your screen.
![Page 16: HTML Introduction](https://reader035.vdocument.in/reader035/viewer/2022062410/568165f9550346895dd92655/html5/thumbnails/16.jpg)
Paragraph Text in the Browser
![Page 17: HTML Introduction](https://reader035.vdocument.in/reader035/viewer/2022062410/568165f9550346895dd92655/html5/thumbnails/17.jpg)
Creating Lists HTML supports three kinds of lists:
an ordered list, which is used to display information in a numeric order
an unordered list, which list items are not listed in a particular order i.e. bullets
a definition list, which is a list of terms, each followed by a definition line that is typically indented slightly to the right
![Page 18: HTML Introduction](https://reader035.vdocument.in/reader035/viewer/2022062410/568165f9550346895dd92655/html5/thumbnails/18.jpg)
Creating ListsHTML supports three kinds of lists:Ordered: Unordered:
Definition:
![Page 19: HTML Introduction](https://reader035.vdocument.in/reader035/viewer/2022062410/568165f9550346895dd92655/html5/thumbnails/19.jpg)
Ordered ListORDERED LIST: <ol Option>…</ol> COMPACT
START=ValueTYPE=(A | a | I | i| 1)
LIST ITEM: <li Option> - used in Ordered List and Unordered List
TYPE=(A | a | I | i| 1)
<h3>Banana Nut Bread:</h3><ol>
<li>Cream together butter and sugar<li>Sift flour, baking soda and salt<li>Add nuts and mashed bananas
</ol>
![Page 20: HTML Introduction](https://reader035.vdocument.in/reader035/viewer/2022062410/568165f9550346895dd92655/html5/thumbnails/20.jpg)
Unordered List UNORDERED LIST: <ul Option>…</ul>
COMPACT
TYPE=(CIRCLE | DISC | SQUARE)
<h3>Pasta Perfection:</h3><ul>
<li>Cannelloni<li>Lasagna<li>Linguine<li>Manicotti
</ul>
![Page 21: HTML Introduction](https://reader035.vdocument.in/reader035/viewer/2022062410/568165f9550346895dd92655/html5/thumbnails/21.jpg)
Definition List DEFINITION LIST: <dl>…</dl> - list of terms
COMPACT
a. DEFINITION TERM <dt>
b. TERM DEFINITION <dd>
<dl> <dt>HTML <dd>Hypertext Markup Language</dl>
![Page 22: HTML Introduction](https://reader035.vdocument.in/reader035/viewer/2022062410/568165f9550346895dd92655/html5/thumbnails/22.jpg)
Applying Character TagsItalic <i> </i>
and bold <b> </b>
character tags
If you support users with older browsers, you should use a logical tag. Otherwise, use physical tags, which are more common and easier to interpret.
![Page 23: HTML Introduction](https://reader035.vdocument.in/reader035/viewer/2022062410/568165f9550346895dd92655/html5/thumbnails/23.jpg)
The Effect of the Character Tags in the Browser
text formatted with bold and italic
![Page 24: HTML Introduction](https://reader035.vdocument.in/reader035/viewer/2022062410/568165f9550346895dd92655/html5/thumbnails/24.jpg)
Physical Character Tags
![Page 25: HTML Introduction](https://reader035.vdocument.in/reader035/viewer/2022062410/568165f9550346895dd92655/html5/thumbnails/25.jpg)
Special Characters and Codes
![Page 26: HTML Introduction](https://reader035.vdocument.in/reader035/viewer/2022062410/568165f9550346895dd92655/html5/thumbnails/26.jpg)
Inserting Horizontal Lines A horizontal line can improve the appearance
of a Web page. The syntax for creating a horizontal line is:
<hr align=“align” size=“size” width=“width” color=“color” noshade>
align specifies the horizontal alignment of the line on the page (center, left, or right)
size specifies the height of the line in pixels or percentage of the screen width
width indicates the width of the line in pixels or percentage of the screen width
color indicates the color of the line noshade specifies that the browser display a solid
line
![Page 27: HTML Introduction](https://reader035.vdocument.in/reader035/viewer/2022062410/568165f9550346895dd92655/html5/thumbnails/27.jpg)
Different Line Styles
size=12width-100%
size=6width-50%
size=3width-25%
size=1width-10%
You can use line styles to improve the
appearance of your Web page.
<hr align=“center” size=“12” width=“100%”>
<hr align=“center” size=“6” width=“50%”>
<hr align=“center” size=“3” width=“25%”>
<hr align=“center” size=“1” width=“10%”>
![Page 28: HTML Introduction](https://reader035.vdocument.in/reader035/viewer/2022062410/568165f9550346895dd92655/html5/thumbnails/28.jpg)
Inserting a GraphicImage filedube.jpg
use the <p> tag so you can center the image
![Page 29: HTML Introduction](https://reader035.vdocument.in/reader035/viewer/2022062410/568165f9550346895dd92655/html5/thumbnails/29.jpg)
The Image File as it Appears in the Browser
![Page 30: HTML Introduction](https://reader035.vdocument.in/reader035/viewer/2022062410/568165f9550346895dd92655/html5/thumbnails/30.jpg)
Patrick’s Resume
Birthday is 12-22-96Summary
I like to play with my brother Matthew and work on our computer. I played soccer for the last two years, and I'm looking forward to playing again this year. This summer, Matthew and I went to Florida on an airplane. In Florida we went to Disneyworld and I went on lot's of rides. Activities
1. Watching the Stars play hockey 2. Building Lego towers 3. Teaching Matthew all the 'good' things 4. Going to Granddad's to feed the horse
Skills• Soccer • My alphabet • Printing my name • Computer learning games
![Page 31: HTML Introduction](https://reader035.vdocument.in/reader035/viewer/2022062410/568165f9550346895dd92655/html5/thumbnails/31.jpg)
Patrick’s Resume HTML
<HTML><HEAD><TITLE>Patrick's Resume</TITLE></HEAD><BODY><H1 ALIGN=CENTER>Patrick's Resume</H1><P ALIGN=CENTER><IMG SRC="Patrick.jpg" WIDTH="125" HEIGHT="150"></P><H3 ALIGN=CENTER>Birthday is 12-22-96</H3><H2 ALIGN=CENTER>Summary</H2>I like to play with my brother Matthew and work on our computer. I played soccer for the last two years, and I'm looking forward to playing again this year. This summer, Matthew and I went to Florida on an airplane. In Florida we went to Disneyworld and I went on lot's of rides. <H3>Activities</H3><OL><LI>Watching the Stars play hockey<LI>Building Lego towers<LI>Teaching Matthew all the 'good' things<LI>Going to Granddad's to feed the horse</OL><H3>Skills</H3><UL><LI>Soccer<LI>My alphabet<LI>Printing my name<LI>Computer learning games</UL></BODY></HTML>
![Page 32: HTML Introduction](https://reader035.vdocument.in/reader035/viewer/2022062410/568165f9550346895dd92655/html5/thumbnails/32.jpg)
32
Your first Assignment Design a website for the “web design course” or for yourself implementing
the learned information introduced in the course.
You may have a look at these websites
http://cis.umary.edu/