Introduction to HTML http://w3schools.com/
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 After saving Before saving
File extensions – do you see them? .txt .doc .html .htm .psd .pdf .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.
I will just show the code between the Body tags. 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