28
Introduction to HTML http://w3schools.com/
| Date post: | 26-Mar-2015 |
| Category: |
Documents |
| Upload: | emily-sullivan |
| View: | 224 times |
| Download: | 3 times |
HTML
• HTML stands for Hyper Text Markup Language
• HTML is not a programming language, it is a markup language
• A markup language is a set of markup tags
• HTML uses markup tags to describe web pages
HTML Tags
• HTML tags are keywords surrounded by angle brackets like <html>
• HTML tags normally come in pairs like <b> and </b>
• The first tag in a pair is the opening tag, the second tag is the closing tag
HTML Documents = Web Pages
• HTML documents describe web pages
• HTML documents contain HTML tags and plain text
• HTML documents are also called web pages
Web Sites and HTML tags
This is an example of a website that has been styled with HTML tags.
Creating your 1st Web Page
• Open any text editor.
• Type in the HTML.
• Save in a “.html” file extension.
• Open in IE, Firefox or some other web browser.
Open notepad and type
Save with a .html file extension
Open the HTML document
After you save your document, the title changes on notepad
Beforesaving
After saving
File extensions – do you see them?
.txt
.doc
.html
.htm
.psd
.jpg
.gif
.xls
.mp3
.mp4
.wav
.wma
How do you show the file extensions?
• Tools
• Folder Options
• View
• Hide extensions for known file types
• OK
<html></html>
• This tells the web browser where to start and stop looking.
• Your document always starts and stops with the <html> and </html> tags.
• The text between <html> and </html> describes the web page
<head></head>
• This tag contains the title, meta, script and style tags used for more advanced formatting and effects.
• The text between <head> and </head> is not displayed in the web browser.
• The Head and Body does not overlap.
<title></title>• The title tag contains the
text displayed at the top of your web browser.
• If the web site is bookmarked, then the <title> will become the text for the bookmark.
• It is a web designer taboo to leave this tag undefined.
• For multi-page sites, each page title should be unique.
<body></body>
• The text between <body> and </body> is visible to the people browsing your website.
Go make your own hello world web page
• Using your notes, go make your first website.
• Include a title.• Include your name.• Say hello.
From now on…
I will just show the
code between the Body
tags.
HTML Headings
• Headings are defined with the <h1> to <h6> tags.
• <h1> defines the largest heading.
• <h6> defines the smallest heading.
http://w3schools.com/html/tryit.asp?filename=tryhtml_headers
<br>
• Use the <br /> tag if you want a line break (a new line) without starting a new paragraph.
• The <br /> element is an empty HTML element. It has no end tag.
• Even if <br> works in all browsers, writing <br /> instead is more future proof.
http://w3schools.com/html/tryit.asp?filename=tryhtml_paragraphs
Text Formatting Tags
Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<strike> Defines strikethrough text
<u> Defines underlined text
Unordered Lists
• An unordered list is a list of items. The list items are marked with bullets.
• An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
http://w3schools.com/html/tryit.asp?filename=tryhtml_lists4
Ordered Lists
• An ordered list is also a list of items. The list items are marked with numbers.
• An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
http://w3schools.com/html/tryit.asp?filename=tryhtml_lists
HTML Paragraphs
• Paragraphs are defined with the <p> tag.
• Browsers automatically adds an empty line before and after paragraphs.
• You can align your paragraphs to the left, right and center positions.
http://w3schools.com/html/tryit.asp?filename=tryhtml_paragraphs1
HTML Rules (Lines)
• The <hr /> tag is used to create an horizontal rule (line).
http://w3schools.com/html/tryit.asp?filename=tryhtml_hr
Go make your own hello world web page
• Unordered list• Ordered list• 3 horizontal rules• 3 paragraphs • Line brakes• 5 unique test
formatting
HTML Links
HTML Images
![1 Hyper Text Markup Language (HTML) UNIT- 02 Hyper Text Markup Language (HTML) UNIT-02/LECTURE-01 Introduction to Hyper Text Markup Language (HTML) About HTML: [RGPV/Dec 2013(4)] So](https://static.documents.pub/doc/80x56/5aae4bc17f8b9a25088c15fa/1-hyper-text-markup-language-html-unit-02-hyper-text-markup-language-html-unit-02lecture-01.jpg)
