27
Basic HTML
| Date post: | 19-Jan-2016 |
| Category: |
Documents |
| Upload: | susan-moore |
| View: | 232 times |
| Download: | 0 times |
Basic HTML
So, what exactly is HTML?
HTML stands for: HTML stands for: Hypertext Markup Language.Hypertext Markup Language.
It is a purpose built markup language for the It is a purpose built markup language for the delivery of documents containing text and graphic delivery of documents containing text and graphic content.content. The “markup” of content is in the form of tag The “markup” of content is in the form of tag
pairs, with the content marked up in the middle.pairs, with the content marked up in the middle.
HTML Tags (page 26)<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
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.
<!--This does not appear on the screen -->
HTML Tags These tags are comprised of:These tags are comprised of:
a a control control that identifies the purpose of a particular tag, andthat identifies the purpose of a particular tag, and a a series of arguments series of arguments that allow you to configure the that allow you to configure the
control in various wayscontrol in various ways an argument takes the form of an identifier, followed by an an argument takes the form of an identifier, followed by an
equals sign (=), followed by a valueequals sign (=), followed by a value
<FONT face=“Arial”>Arial Text</font><FONT face=“Arial”>Arial Text</font>• Arial TextArial Text
<P>This is a paragraph</P><P>This is a paragraph</P>• This is the end of a paragraphThis is the end of a paragraph
<B>This will be displayed in bold</B><B>This will be displayed in bold</B>• This will be displayed in boldThis will be displayed in bold
<P ALIGN=“LEFT”>This is Left Aligned</P><P ALIGN=“LEFT”>This is Left Aligned</P>
HTML Tags (page 200) LISTLIST
Ordered List <ol>Ordered List <ol> Unordered List <ul>Unordered List <ul>
EXAMPLE:EXAMPLE:<UL><UL>
<LI>Option 1</LI><LI>Option 1</LI><LI>Option 2</LI><LI>Option 2</LI><LI>Option 3<LI>Option 3
<OL><OL><LI>No bullets!</LI><LI>No bullets!</LI><LI>Just <LI>Just
numbers!</LI>numbers!</LI></OL></OL>
</LI></LI></UL></UL>
HTML Tags (contd)<<hinthintLowercase letters list:Lowercase letters list:<ol type="a"><ol type="a">
Roman numbers list:</h4>Roman numbers list:</h4><ol type="I"><ol type="I">
<h4>Lowercase Roman numbers list:</h4><h4>Lowercase Roman numbers list:</h4><ol type="i"><ol type="i"> <li>Apples</li><li>Apples</li> <li>Bananas</li><li>Bananas</li> <li>Lemons</li><li>Lemons</li> <li>Oranges</li><li>Oranges</li></ol> </ol>
Lists Example
HTML TAGS<H?> HeadingHeading
This is a heading</H?>This is a heading</H?> Where ? Is the level 1 -> 8Where ? Is the level 1 -> 8
ItalicItalic <i>This is in italics</i><i>This is in italics</i>
Break LineBreak Line This is a new line<br>This is a new line<br>
Horizontal LineHorizontal Line This is a line on the screen <hr> This is a line on the screen <hr>
Preserved Format TextPreserved Format Text <pre>Hi I'm preserved</pre><pre>Hi I'm preserved</pre>
UnderlinedUnderlined <u>Hi im underlined</u><u>Hi im underlined</u>
SuperscriptSuperscript This is <SUP> superscript </SUP>This is <SUP> superscript </SUP>
SubscriptSubscript This is <SUB> subscript </SUB>This is <SUB> subscript </SUB>
Paragraph Formatting(page 33)
<P ALIGN=LEFT>This is Left Aligned</P><P ALIGN=LEFT>This is Left Aligned</P>
This is Left AlignedThis is Left Aligned
<P ALIGN=CENTER>This is Center Aligned</P><P ALIGN=CENTER>This is Center Aligned</P>
This is Center AlignedThis is Center Aligned
<P ALIGN=RIGHT>This is Right Aligned</P><P ALIGN=RIGHT>This is Right Aligned</P>
This is Right AlignedThis is Right Aligned
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'sjust that a city with a million inhabitants and no sewers is ratherrobust for poets, who prefer daffodils and no wonder.
-- (Terry Pratchett, Mort)
<font size="2" face="Arial">Poets have tried to describe <B>Ankh-Morpork</B>. They have failed.<br> Perhaps it's the sheer zestful vitality of the place, or maybe it's<br> just that a city with a million inhabitants and no sewers is rather<br> robust for poets, who prefer daffodils and no wonder. <br></font><p><font size="2" face="Arial"> --(<I>Terry Pratchett, Mort</I>) </font>
The Content:The Content:
A First Example
Combining Content and the Page Template:Combining Content and the Page Template:
<html><html><head><head><title><title>My First Web Page!My First Web Page!</title></title></head></head><body><body><font size="2" face="Arial"><font size="2" face="Arial">Poets have tried to describe Poets have tried to describe <B><B>Ankh-Ankh-MorporkMorpork</B></B>. They have failed. Perhaps it's the sheer zestful . They have failed. Perhaps it's the sheer zestful vitality of the place, or maybe it's just that a city with a vitality of the place, or maybe it's just that a city with a million inhabitants and no sewers is rather robust for poets, million inhabitants and no sewers is rather robust for poets, who prefer daffodils and no wonder. who prefer daffodils and no wonder.
</font><p></font><p><font size="2" face="Arial"><font size="2" face="Arial">--(--(<I><I>Terry Pratchett, MortTerry Pratchett, Mort</I></I>))</font></font></body></body></html></html>
A First ExampleTitle
Body
Type Size HTML HTML does not use the traditional point system does not use the traditional point system used in most word used in most word
processors.processors.Default
Font Size
DefaultFont Size
HTML ScaleHTML Scale 11 2 2 3 3 4 4 5 5 6 6 77
Point ScalePoint Scale 88 1010 1212 1414 1616 1818 2020
Changing the default type size moves the HTML Scale up or down the Changing the default type size moves the HTML Scale up or down the Point Scale Respectively.Point Scale Respectively.
HTML ScaleHTML Scale 11 2 2 3 3 4 4 5 5 6 6 77
Point ScalePoint Scale 1212 1414 1616 1818 2020 2222 2424
Images & HTML(134 – 138)
HTML provides a facility for including inline images within HTML provides a facility for including inline images within a document. The name of the tag used to do this is the a document. The name of the tag used to do this is the IMGIMG tag (<IMG>).tag (<IMG>).
<IMG SRC=“http://<IMG SRC=“http://xx.ucd.ie/pratchett.jpg”>.ucd.ie/pratchett.jpg”>
Subproperties:Subproperties: <ALIGN><ALIGN> <BORDER><BORDER> <HEIGHT><HEIGHT> <WIDTH><WIDTH>
Hyperlinks (page 80)
To make a link on your page to a document, image To make a link on your page to a document, image or even another website you use the:or even another website you use the:
<a href = <a href = http://www.google.com.au >Click me to go to google</a> >Click me to go to google</a>
This is the link tag
This is were it links too
This is what the user will see
This is the closing tag
Linking within a Document
Linking to a specific place in a documentLinking to a specific place in a document First the place in the document to be linked to must be labeled.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.Next a link must be set up to point to this label.
For example…For example…
<A NAME='anchor1'>Inter-Document Links</A><A NAME='anchor1'>Inter-Document Links</A>
What you want to write…What you want to write………………………………………………………………………………………..
<A HREF='#anchor1'>Click Here for Anchor 1</A><A HREF='#anchor1'>Click Here for Anchor 1</A>
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?
<TABLE><TR>
<TD>…</TD>
<TD>…</TD>
</TR><TR>
<TD>…</TD>
<TD>…</TD>
</TR></TABLE>
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
Column and Row Spanning Example
<TABLE border=1><TABLE border=1><TR><TR>
<TD>Row 1, Cell 1</TD><TD>Row 1, Cell 1</TD><TD>Row 1, Cell 2</TD><TD>Row 1, Cell 2</TD><TD>Row 1, Cell 3</TD><TD>Row 1, Cell 3</TD>
</TR></TR><TR><TR>
<TD rowspan=2>Row 2, Cell 1</TD><TD rowspan=2>Row 2, Cell 1</TD><TD colspan=2>Row 2, Cell 2</TD><TD colspan=2>Row 2, Cell 2</TD>
</TR></TR><TR><TR>
<TD>Row 3, Cell 2</TD><TD>Row 3, Cell 2</TD><TD>Row 3, Cell 3</TD><TD>Row 3, Cell 3</TD>
</TR></TR></TABLE></TABLE>
Column and Row Spanning Example
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 frame code always goes in between the end of
the head and the beginning of the bodythe head and the beginning of the body To specify a frame you use the frameset tagTo specify a frame you use the frameset tag<frameset . . . . . ><frameset . . . . . > You must then specify the number of rows (rows) You must then specify the number of rows (rows)
and columns (cols) you wish to haveand columns (cols) you wish to have
Frames
<frameset rows=“40,50,10”><frameset rows=“40,50,10”>
</frameset></frameset>
This is the frame tag
This specifies that we want rows NOT columns
This states that we want threeColumns. The first one at 40 pixels.The second at 50 pixels and the lastAt 10 pixels
Frames
We must then tell the browser which web We must then tell the browser which web page file to load in each frame. To do this page file to load in each frame. To do this we say:we say:
<frame src=“1.html” /><frame src=“1.html” />
This is the frame reference tag
This attribute tells us thatThis frame will display 1.html
This makes it XHTML compatible
Frames
As with all tags the frame tag has a number of As with all tags the frame tag has a number of attributes:attributes:
name – This can be used to identify the frame (eg name – This can be used to identify the frame (eg name=“links”) name=“links”) [page 307][page 307]
frameborder – This specifies the border size of the frameborder – This specifies the border size of the frame (eg frameborder =“0”) frame (eg frameborder =“0”) [page 309][page 309]
scrolling – This specifies if the frame will be shown scrolling – This specifies if the frame will be shown with or without a scroll bar (eg scrolling = “yes”) with or without a scroll bar (eg scrolling = “yes”) [page 313][page 313]
target – This specifies were the frame will open any target – This specifies were the frame will open any of its files into (eg target=“main”). of its files into (eg target=“main”). [page 315][page 315]
Frames
When setting out frames the order would be When setting out frames the order would be as follows:as follows:
BA C
ED F
<frameset cols="200,150,20" rows="80,*">
<frame src=“A.htm" /> <frame src=“B.htm" />
<frame src=“C.htm" /><frame src=“D.htm" /><frame src=“E.htm" /><frame src=“F.htm" />
</frameset>
Frames Creating a frames Creating a frames
webpagewebpage
Frames
<frameset rows="64,*"><frameset rows="64,*">
<frame name="banner" scrolling="no" target="contents“ src=“top.htm”><frame name="banner" scrolling="no" target="contents“ src=“top.htm”>
<frameset cols="150,*"><frameset cols="150,*">
<frame name="contents" target="main“ src=“side.htm”><frame name="contents" target="main“ src=“side.htm”>
<frame name="main“ src=“main.htm”>
</frameset>
References
http://homepage.cs.latrobe.edu.au/chuynh/CSE2ICE/http://homepage.cs.latrobe.edu.au/chuynh/CSE2ICE/
http://www.webmonkey.com/2010/02/html_cheatsheet/
