Download presentation
Presentation is loading. Please wait.
1
Basic HTML
2
So, what exactly is HTML? HTML stands for: HTML stands for: Hypertext Markup Language. It is a purpose built markup language for the delivery of documents containing text and graphic content. It is a purpose built markup language for the delivery of documents containing text and graphic content. The “markup” of content is in the form of tag pairs, with the content marked up in the middle.
3
HTML Tags (page 26) Hidden Text This indicates the start of the Web page. This starts the header of the document. The document title which appears at the top of a browser window. The end of the document title. The end of the header section. The start of the main body of the document (main content). The end of the document body, The end of the Web page.
4
HTML Tags These tags are comprised of: These tags are comprised of: a control that identifies the purpose of a particular tag, and a series of arguments that allow you to configure the control in various ways an argument takes the form of an identifier, followed by an equals sign (=), followed by a value Arial Text Arial Text Arial TextArial Text This is a paragraph This is a paragraph This is the end of a paragraphThis is the end of a paragraph This will be displayed in bold This will be displayed in bold This will be displayed in boldThis will be displayed in bold This is Left Aligned This is Left Aligned
5
HTML Tags (page 200) LIST Ordered List Ordered List Unordered List Unordered List EXAMPLE:<UL> Option 1 Option 1 Option 2 Option 2 Option 3 Option 3<OL> No bullets! No bullets! Just numbers! Just numbers! </OL></LI></UL>
6
HTML Tags (contd) <hint Lowercase letters list: Roman numbers list: Roman numbers list: Lowercase Roman numbers list: Lowercase Roman numbers list: Apples Apples Bananas Bananas Lemons Lemons Oranges Oranges </ol>
7
Lists Example
8
HTML TAGS Heading Heading This is a heading This is a heading Where ? Is the level 1 -> 8 Italic Italic This is in italics This is in italics Break Line Break Line This is a new line This is a new line Horizontal Line Horizontal Line This is a line on the screen This is a line on the screen Preserved Format Text Preserved Format Text Hi I'm preserved Hi I'm preserved Underlined Underlined Hi im underlined Hi im underlined Superscript Superscript This is superscript This is superscript Subscript Subscript This is subscript This is subscript
9
Paragraph Formatting(page 33) This is Left Aligned This is Left Aligned This is Left Aligned This is Center Aligned This is Center Aligned This is Center Aligned This is Right Aligned This is Right Aligned This is Right Aligned
10
A First Example Poets have tried to describe Ankh-Morpork. They have failed. Perhaps it's the sheer zestful vitality of the place, or maybe it's just that a city with a million inhabitants and no sewers is rather robust for poets, who prefer daffodils and no wonder. -- (Terry Pratchett, Mort) Poets have tried to describe Ankh-Morpork. They have failed. Perhaps it's the sheer zestful vitality of the place, or maybe it's just that a city with a million inhabitants and no sewers is rather robust for poets, who prefer daffodils and no wonder. --( Terry Pratchett, Mort ) The Content: The Content:
11
A First Example Combining Content and the Page Template: Combining Content and the Page Template:<html><head> My First Web Page! My First Web Page! </head><body> Poets have tried to describe Ankh- Morpork. They have failed. Perhaps it's the sheer zestful vitality of the place, or maybe it's just that a city with a million inhabitants and no sewers is rather robust for poets, who prefer daffodils and no wonder. Poets have tried to describe Ankh- Morpork. They have failed. Perhaps it's the sheer zestful vitality of the place, or maybe it's just that a city with a million inhabitants and no sewers is rather robust for poets, who prefer daffodils and no wonder.</font><p> --( Terry Pratchett, Mort ) --( Terry Pratchett, Mort ) </body></html>
12
A First Example Title Body
13
Type Size HTML does not use the traditional point system used in most word processors. HTML does not use the traditional point system used in most word processors. Default Font Size Default Font Size HTML Scale1 2 3 4 5 6 7 Point Scale8101214161820 Changing the default type size moves the HTML Scale up or down the Point Scale Respectively. Changing the default type size moves the HTML Scale up or down the Point Scale Respectively. HTML Scale1 2 3 4 5 6 7 Point Scale12141618202224
14
Images & HTML (134 – 138) HTML provides a facility for including inline images within a document. The name of the tag used to do this is the IMG tag ( ). HTML provides a facility for including inline images within a document. The name of the tag used to do this is the IMG tag ( ). Subproperties:
15
Hyperlinks (page 80) To make a link on your page to a document, image or even another website you use the: To make a link on your page to a document, image or even another website you use the: Click me to go to google Click me to go to google http://www.google.com.au This is the link tag This is were it links too This is what the user will see This is the closing tag
16
Linking within a Document Linking to a specific place in a document Linking to a specific place in a document First the place in the document to be linked to must be labeled. Next a link must be set up to point to this label. For example… For example… Inter-Document Links Inter-Document Links What you want to write… …………………………………………. Click Here for Anchor 1 Click Here for Anchor 1
17
Tables (page 223) What tags do we need to use for a table in HTML? What tags do we need to use for a table in HTML? … … Marks the start of the table Marks the start of the first row Identifies the first cell in the row Identifies the second cell in the row Marks the end of the first row Marks the end of the table Marks the start of the second row
18
Column and Row Spanning Example <TR> Row 1, Cell 1 Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 2 Row 1, Cell 3 Row 1, Cell 3 </TR><TR> Row 2, Cell 1 Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 2 </TR><TR> Row 3, Cell 2 Row 3, Cell 2 Row 3, Cell 3 Row 3, Cell 3 </TR></TABLE>
19
Column and Row Spanning Example
20
Frames (page 283) Frames are very useful in separating a web page. Frames are very useful in separating a web page. The frame code always goes in between the end of the head and the beginning of the body The frame code always goes in between the end of the head and the beginning of the body To specify a frame you use the frameset tag To specify a frame you use the frameset tag You must then specify the number of rows (rows) and columns (cols) you wish to have You must then specify the number of rows (rows) and columns (cols) you wish to have
21
Frames </frameset> This is the frame tag This specifies that we want rows NOT columns This states that we want three Columns. The first one at 40 pixels. The second at 50 pixels and the last At 10 pixels
22
Frames We must then tell the browser which web page file to load in each frame. To do this we say: We must then tell the browser which web page file to load in each frame. To do this we say: This is the frame reference tag This attribute tells us that This frame will display 1.html This makes it XHTML compatible
23
Frames As with all tags the frame tag has a number of attributes: As with all tags the frame tag has a number of attributes: name – This can be used to identify the frame (eg name=“links”) [page 307] frameborder – This specifies the border size of the frame (eg frameborder =“0”) [page 309] scrolling – This specifies if the frame will be shown with or without a scroll bar (eg scrolling = “yes”) [page 313] target – This specifies were the frame will open any of its files into (eg target=“main”). [page 315]
![Frames As with all tags the frame tag has a number of attributes: As with all tags the frame tag has a number of attributes: name – This can be used to identify the frame (eg name= links ) [page 307] frameborder – This specifies the border size of the frame (eg frameborder = 0 ) [page 309] scrolling – This specifies if the frame will be shown with or without a scroll bar (eg scrolling = yes ) [page 313] target – This specifies were the frame will open any of its files into (eg target= main ).](http://images.slideplayer.com./27/9224194/slides/slide_23.jpg "[page 315].")
24
Frames When setting out frames the order would be as follows: When setting out frames the order would be as follows: BAC EDF
25
Frames Creating a frames webpage Creating a frames webpage
26
Frames
27
References http://homepage.cs.latrobe.edu.au/chuynh/CSE2ICE/ http://www.webmonkey.com/2010/02/html_cheatsheet/
Similar presentations
