Download presentation
Presentation is loading. Please wait.
1
The basic structure of any HTML The basic structure of any HTML page is: Your web page title here ** [all the HTML for display] ** : : CENG 449 Lecture 11
![The basic structure of any HTML The basic structure of any HTML page is: Your web page title here ** [all the HTML for display] ** : : CENG 449 Lecture 11](http://images.slideplayer.com./15/4681520/slides/slide_1.jpg "The basic structure of any HTML The basic structure of any HTML page is: Your web page title here ** [all the HTML for display] ** : : CENG 449 Lecture 11")
2
Example My First Web Page Hello ALL. Hello ALL. Hello ALL. Hello ALL. Result is: CENG 449 Lecture 12
3
HTML Hypertext Markup Language A Computer language used to add objects and other information to a Web page Not a programming language, it’s a markup language Markup Language A set of markup tags HTML Tags Surrounded by angle brackets <> Come in pairs Content Here Start Tag = first tag —also called an opening tag End Tag = second tag —also called a closing tag HTML Documents = Web Pages Describe Web pages Contain HTML tags and plain text XHTML Extensible Hypertext Markup Language Very similar to HTML—same concept Newer and Stricter than HTML, but the two terms are often used interchangeably A sort of cross between HTML and XML (Extensible Markup Language) XML A set of rules used to encode electronic documents Employed to increase compatibility among electronic documents and satisfy current Web standards Employed to increase compatibility between electronic documents and the Web CSS Cascading Style Sheets A type of computer language used to specify how a web page should be presented Font colors, positioning, line spacing, borders, etc… CENG 449 Lecture 13
4
HTML strict document type declaration DOCTYPE Document type declaration Always the first thing typed into your HTML document Appears BEFORE opening tag Tells the browser which version and what type of (X)HTML you are using Does not display as visual content on your Web page <!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 /strict.dtd"> CENG 449 Lecture 14
5
HTML Tags CENG 449 Lecture 15
6
HTML Heading Tags Headings are achieved in HTML by "tagging" certain chunks of text with heading tags. The format for a HTML heading tag is: Text to Appear in Heading N is a number from 1 to 6 identifying the heading size. Here are some examples of different heading sizes: CENG 449 Lecture 16
7
Most commonly used tags Content Here Text placed between the angled brackets describesthe Web page Opening tag is very first displayed in the markup after DOCTYPE Closing tag is the very last displayed in the markup Content Here Text placed between the angled brackets describes the title of the Web page Content Here Text placed between the angled brackets describes the visible page content Content Here Text placed between the angled brackets displays as a heading h1 (largest heading), h2, h3, h4, h5, h6 (smallest heading) Content Here Text placed between the angled brackets displays as a paragraph Content Here Italics Content Here Bold Content Here Describes the font you’re using Content Here Displays quotation marks around content Adds a space Adds a line break Empty/Self-Closing tag —space before the slash mark makes it compatible with older browsers Adds a horizontal line CENG 449 Lecture 17
8
Adds an image to your page Content Here Displays a hyperlink Content Here Displays an ordered list Uses numbers for list items Content Here Displays an unordered list Uses bullets for list items Content Here Used in an unordered or ordered list to separate the items in a list Coffee Tea Milk Content Here Centers content on a page CENG 449 Lecture 18
9
Nested Tags (X)HTML can be nested (X)HTML elements can be nested inside of each other Content Here When nesting elements, the first tag opened, must be the last tag closed GOOD Content Here BAD Content Here CENG 449 Lecture 19
10
Example CENG 449 Lecture 110
11
Example CENG 449 Lecture 111
12
Example Headings This is a Main Heading This is a Level 2 Heading This is a Level 3 Heading This is a Level 4 Heading This is a Level 5 Heading This is a Level 6 Heading CENG 449 Lecture 112
13
Paragraphs: To create a paragraph, surround the words that make up the paragraph with an opening tag and closing tag. By default, a browser will show each paragraph on a new line with some space between it and any subsequent paragraphs. CENG 449 Lecture 113
14
Example Paragraphs A paragraph consists of one or more sentences that form a self-contained unit of discourse. The start of a paragraph is indicated by a new line. Text is easier to understand when it is split up into units of text. For example, a book may have chapters. Chapters can have subheadings. Under each heading there will be one or more paragraphs. CENG 449 Lecture 114
15
Bold & Italic Tags: By enclosing words in the tags and we can make characters appear bold. Bold This is how we make a word appear bold. Inside a product description you might see some key features in bold. CENG 449 Lecture 115
16
By enclosing words in the tags and we can make characters appear italic Italic This is how we make a word appear italic. It's a potato Solanum teberosum. Captain Cook sailed to Australia on the Endeavour. CENG 449 Lecture 116
17
Superscript & Subscript: The element is used to contain characters that should be superscript such as the suffixes of dates or mathematical concepts like raising a number to a power such as 2 2. The element is used to contain characters that should be subscript. It is commonly used with foot notes or chemical formulas such as H 2 0. Superscript and Subscript On the 4 th of September you will learn about E=MC 2. The amount of CO 2 in the atmosphere grew by 2ppm in 2009 1. CENG 449 Lecture 117
18
CENG 449 Lecture 118
19
Line Breaks & Horizontal Rules The browser will automatically show each new paragraph or heading on a new line. But if you wanted to add a line break inside the middle of a paragraph you can use the line break tag. Line Breaks The Earth gets one hundred tons heavier every day due to falling space dust. CENG 449 Lecture 119
20
CENG 449 Lecture 120
21
To create a break between themes — such as a change of topic in a book or a new scene in a play — you can add a horizontal rule between sections using the tag. Horizontal Rules Venus is the only planet that rotates clockwise. Jupiter is bigger than all the other planets combined. CENG 449 Lecture 121
22
CENG 449 Lecture 122
23
Horizontal Rules Venus is the only planet that rotates clockwise. Jupiter is bigger than all the other planets combined. CENG 449 Lecture 123
24
The use of the element indicates that its content has strong importance. Strong Beware: Pickpockets operate in this area. This toy has many small pieces and is not suitable for children under five years old. CENG 449 Lecture 124
25
The element indicates emphasis that subtly changes the meaning of a sentence. By default browsers will show the contents of an element in italic. Emphasis I think Ivy was the first. I think Ivy was the first. I think Ivy was the first. CENG 449 Lecture 125
26
The element is used for shorter quotes that sit within a paragraph Quotations Did you ever stop to think, and forget to start again? As A.A. Milne said, Some people talk to animals. Not many listen though. That's the problem. CENG 449 Lecture 126
27
, The element can be used to show content that has been inserted into a document, while the element can show text that has been deleted from it. Insert and Delete It was the worst best idea she had ever had. CENG 449 Lecture 127
28
Strikethrough indicates something that is no longer accurate or relevant (but that should not be deleted). Strikethrough Laptop computer: Was $995 Now only $375 CENG 449 Lecture 128
29
The element is used for longer quotes that take up an entire paragraph. Quotations Did you ever stop to think, and forget to start again? Did you ever stop to think, and forget to start again? Did you ever stop to think, and forget to start again? Did you ever stop to think, and forget to start again? As A.A. Milne said, Some people talk to animals. Not many listen though. That's the problem. CENG 449 Lecture 129
30
CENG 449 Lecture 130
31
Lists: 1. Ordered Lists: The ordered list is created with the element. Each item in the list is placed between an opening tag and a closing tag. (The li stands for list item.) CENG 449 Lecture 131
32
Ordered Lists Chop potatoes into quarters Simmer in salted water for 15-20 minutes until tender Heat milk, butter and nutmeg Drain potatoes and mash Mix in the milk mixture CENG 449 Lecture 132
33
Ordered lists with type attribute Ordered Lists List Header Item 1 Item 2 Item 3 Item 4 CENG 449 Lecture 133
34
For he ordered lists: type="1"The list items will be numbered with numbers (default) type="A"The list items will be numbered with uppercase letters type="a"The list items will be numbered with lowercase letters type="I"The list items will be numbered with uppercase roman numbers type="i"The list items will be numbered with lowercase roman numbers CENG 449 Lecture 134
35
Unordered Lists: The unordered list is created with the element. Each item in the list is placed between an opening tag and a closing tag. Unordered Lists 1kg King Edward potatoes 100ml milk 50g salted butter Freshly grated nutmeg Salt and pepper to taste CENG 449 Lecture 135
36
Unordered List type Attribute You can use type attribute for tag to specify the type of bullet you like. By default it is a disc. Following are the possible options: CENG 449 Lecture 136
37
HTML Unordered List Beetroot Ginger Potato Radish CENG 449 Lecture 137
38
HTML Attributes An attribute is used to define the characteristics of an HTML element (tag) and is placed inside the element's opening tag. All attributes are made up of two parts: a name and a value: …… CENG 449 Lecture 138
39
Align Attribute Example This is left aligned This is center aligned This is right aligned CENG 449 Lecture 139
40
Reading Assignment: Read the information on the following web page http://www.tutorialspoint.com/html/html_attributes.htm http://www.tutorialspoint.com/html/html_attributes.htm Setting Font Size Font size="1" Font size="2" Font size="3" Font size="4" Font size="5" Font size="6" Font size="7" CENG 449 Lecture 140
41
HTML Definition Lists: HTML and XHTML support a list style which is called definition lists where entries are listed like in a dictionary or encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or other name/value list. Definition List makes use of following three tags. - Defines the start of the list - A term - Term definition - Defines the end of the list CENG 449 Lecture 141
42
HTML Definition List HTML This stands for Hyper Text Markup Language HTTP This stands for Hyper Text Transfer Protocol CENG 449 Lecture 142
43
Nested Lists: Nested Lists Mousses Pastries Croissant Mille-feuille Palmier Profiterole Tarts CENG 449 Lecture 143
44
CENG 449 Lecture 144
45
1. 2. 3. Lists 4. 5. 6. Scrambled Eggs 7. 8. Eggs are one of my favourite foods. Here is a 9.recipe for deliciously rich scrambled eggs. 10. 11. Ingredients 12. 13. 14. 2 eggs 15. 1tbs butter 16. 2tbs cream 17. 18. Method 19. 20. Melt butter in a frying pan over a medium 21.Heat 22. 23. Gently mix the eggs and cream in a bowl 24. Once butter has melted add cream and eggs 25. Using a spatula fold the eggs from the edge of 26.the pan to the center every 20 seconds (as if 27.you are making an omelette) 28. 29. When the eggs are still moist remove from the 30.heat (it will continue to cook on the plate 31.until served) 32. 33. 34. 35. 36. CENG 449 Lecture 145
46
CENG 449 Lecture 146
47
CENG 449 Lecture 147
48
CENG 449 Lecture 148
49
CENG 449 Lecture 149
50
CENG 449 Lecture 150
51
CENG 449 Lecture 151
52
CENG 449 Lecture 152
53
CENG 449 Lecture 153
54
CENG 449 Lecture 154
55
CENG 449 Lecture 155
56
CENG 449 Lecture 156
57
CENG 449 Lecture 157
58
CENG 449 Lecture 158
59
CENG 449 Lecture 159
60
CENG 449 Lecture 160
61
CENG 449 Lecture 161
62
CENG 449 Lecture 162
63
CENG 449 Lecture 163
64
CENG 449 Lecture 164
65
CENG 449 Lecture 165
66
CENG 449 Lecture 166
67
CENG 449 Lecture 167
68
CENG 449 Lecture 168
69
CENG 449 Lecture 169
70
CENG 449 Lecture 170
71
CENG 449 Lecture 171
72
CENG 449 Lecture 172
73
CENG 449 Lecture 173
74
CENG 449 Lecture 174
75
CENG 449 Lecture 175
76
CENG 449 Lecture 176
77
CENG 449 Lecture 177
78
CENG 449 Lecture 178
79
CENG 449 Lecture 179
80
CENG 449 Lecture 180
81
CENG 449 Lecture 181
82
CENG 449 Lecture 182
83
CENG 449 Lecture 183
Similar presentations
