Download presentation
Presentation is loading. Please wait.
Published byDuane Short Modified over 9 years ago
2
HTML stands for Hyper Text Mark-up Language. The coding language used to create documents for the World Wide Web HTML is composed of tags. HTML tags are always enclosed in angle brackets, <>, and are case-insensitive; that is, it doesn't matter whether you type them in upper or lower case Tags typically occur in begin-end pairs, with an opening and closing tag. e.g.. Web pages begins with and ends with
3
The HEAD tags contain all of the document's header information. . It doesn't appear at the top of the browser window, but contain things like the document title and so on. The Title tag is placed within the HEAD structure. Between the TITLE tags, you should have the title of your document. This will appear at the top of the browser's title bar .
4
The BODY tags come after the HEAD tags. Between the BODY tags, you find all of the stuff that gets displayed in the browser window. All of the text, the graphics, and links, and so on. . Placing a background image can be done by typing in the following:
5
So, putting everything we've covered thus far into one file, we have: My First Webpage Open Notepad, type the above, save file as: mywebpage.html (make sure you have the.html file extension)
6
The heading tags appear between the BODY tags. There are six levels of headings, from heading 1 through to heading 6. Heading 1 The beginning of a paragraph is marked by, and the end by. This is a paragraph This is also a paragraph And yet another paragraph HTML ignores spaces and line breaks between texts.
7
If you want to end a line after a certain word, but don't want to start a new paragraph, you could use the tag. Text on a web page can be set to bold, italic and underline, just as you could with text in a word processing document. ◦The tags are and for bold, ◦ and for italic, ◦ and for underline.
8
The FONT and COLOR tags can be use to change the fonts and colours of your web page. ◦ here you have your text The Horizontal Rule is useful when you want to separate two sections with a line.
9
In order to create a hyperlink, you'll need to know two things. The first is the URL, that is, the location of the file to which you want the link to go. The second is knowledge of how links work. Links works by using the HREF (Hypertext REFerence) tag and the URL you want to link to. e.g. Yahoo website - creates a link to the yahoo website. note: a signifies the anchor.
10
There are 2 types of lists in HTML: ordered lists, and unordered lists. ◦ and for ordered list which produces a numbered list. ◦ and for unordered list which produces a bulleted list. ◦ and for items on the list.
11
Example of ordered list: would produce Monday 1. Monday Tuesday 2. Tuesday Wednesday 3. Wednesday Thursday 4. Thursday Friday 5. Friday
12
Example of unordered list: would produce Monday * Monday Tuesday * Tuesday Wednesday * Wednesday Thursday * Thursday Friday * Friday
13
Images are placed in web documents using the IMG tag. In order to make the IMG tag work, you need to use an SRC attribute. SRC stands for "source" where SRC is the URL of the graphic you want to have displayed on your web page. e.g. Placing images within links is also possible. To do so, merely place the IMG tag within the anchor container. e.g.
14
The Table tag consists of the and tags. use to create the title of a table. use to create a table row. use to create a table cell. border- specify the border size. bordercolor- specify the colour of the border. align- specify the alignment of the whole table. cellspacing- specify the amount of empty space between the outer edges of each table cell. cellpadding- specify the amount of empty space between the border of the table cell and the content of the cell.
15
simple table row 1/column 1 row 1/column 2 row 1/column 3 row 2/column 1 row 2/column 2 row 2/column 3
16
Tables are useful for organising the layout of your webpage. another simple table row 1/column 1 row 1/column 2 row 2/column 1 row 2/column 2
17
Rows can be expanded. expanding table row 1/column 1 row 1/column 2 row 2/column 1 row 2/column 2 row 3/column 2
18
Columns can also be expanded. expanding table row 1/column 1 row 1/column 3 row 2/column 1 row 2/column 2 row 2/column 3
19
A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. Forms are placed in web documents using the form tag. E.g. The input tag is used to place input elements on the web page E.g.
20
CSS is an extension to basic HTML that allows you to style your web pages. Style refers to the definition of fonts and colour on your page. CSS can also be used to specify the image background of your page and changing the looks of your links. CSS can be embedded into your webpage or store in an external text file that you can then link to your webpage.
21
CSS is defined in the head section of the webpage. External style sheet Embedded style sheet body { background-image: url(image.jpg); background-repeat: no-repeat; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: white; }
22
You can customise and create styles the way you want by declaring styles as classes. .mystyle { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 20px; color: red; } Hello World
23
You can also customise the way your links appears on the webpage. a:link {text-decoration: underline overline; color: red;} a:active {text-decoration: none; color: yellow;} a:visited {text-decoration: overline;} a:hover {text-decoration: none; background: green; color: red;}
24
body { background-color: #ff3333; font-family: Verdana, Arial, Helvetica, sans- serif; font-size: 12px; line-height: 24px; color: #336699; margin: 0px; } H1 { font: 14pt verdana; color: #CCCCCC; } A { color:#FFOOOO; text-decoration: none; } --> td { font-family: Arial, Helvetica, sans-serif; font: 10pt verdana; color: #666666; } a:link{ color: #006699; text-decoration: none; } a:visited{ color: #FF0000; text-decoration: none; } a:hover{ color: #FFFFFF; text-decoration: underline; }
25
Search the Internet for more examples and tutorials. http://www.w3schools.com/html/default.asp http://www.w3schools.com/html/default.asp http://www.w3schools.com/css/default.asp http://www.w3schools.com/css/default.asp
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.