Download presentation
Presentation is loading. Please wait.
1
Introduction to HTML
2
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
3
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
4
HTML Documents = Web Pages
HTML documents describe web pages HTML documents contain HTML tags and plain text HTML documents are also called web pages
5
Web Sites and HTML tags This is an example of a website that has been styled with HTML tags.
6
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.
7
Open notepad and type
8
Save with a .html file extension
9
Open the HTML document
10
After you save your document, the title changes on notepad
After saving Before saving
11
File extensions – do you see them?
.txt .doc .html .htm .psd .pdf .jpg .gif .xls .mp3 .mp4 .wav .wma
12
How do you show the file extensions?
Tools Folder Options View Hide extensions for known file types OK
13
<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
14
<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.
15
<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.
16
<body></body>
The text between <body> and </body> is visible to the people browsing your website.
17
Go make your own hello world web page
Using your notes, go make your first website. Include a title. Include your name. Say hello.
18
I will just show the code between the Body tags.
From now on… I will just show the code between the Body tags.
19
HTML Headings Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.
20
<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.
21
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
22
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.
23
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.
24
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.
25
HTML Rules (Lines) The <hr /> tag is used to create an horizontal rule (line).
26
Go make your own hello world web page
Unordered list Ordered list 3 horizontal rules 3 paragraphs Line brakes 5 unique test formatting
27
HTML Links
28
HTML Images
Similar presentations
