37
HTML
| Date post: | 23-Dec-2015 |
| Category: |
Documents |
| Upload: | avice-palmer |
| View: | 223 times |
| Download: | 1 times |
HTML
Goals
• How to use the Komodo editor• HTML coding and testing
• Basic HTML tags• List and Images• Tables and Links• At least 2 pages and navigation
• http://www.w3schools.com
Basic Syntax of HTML
• <> denotes tags• First tag: <html>• Most tags require and opening and closing
tags to stop– <\html> indicates the closing tag
Start and End of HTML
• <html> </html> Start and end of HTML• <head> </head> Start and end of head
section• <body> </body> Start and end of body• <title> </title> Start and end of title of
your page
HTML Tag Rules
• Whitespace are ignored
• Beware: HTML does no checking for syntax errors – it interprets what it can and ignores the rest. You will need to be the error checker for yourself
Editing Content
• For example:– <b> indicates the following text will be bold– Example:
<b> Bold me! <\b> but not me!
The result of the above will be:
Bold me! but not me!
Basic Structure of HTML Page
<html><head>
<title> The Title </title></head><body>
<b>Test Page</b> with text<body>
</html>
Syntax
• Headers<h1> Header 1 </h1><h2> Header 2 </h2><h3> Header 3 </h3><h4> Header 3 </h4><h5> Header 3 </h5><h6> Header 3 </h6>
• Paragraphs<p> Paragraph </p>
More Syntax
• Next Line<br>
• Changing text<b> bold </b><i> italics </i><u> underline </u>
• Comment– <!-- Comment Text -->
More Syntax!
• space• <marquee> Text scrolling </marquee>• <font color="blue"> Font text </font>– Options: color, face, size
• <center> Centered Text </center>
• <body bgcolor=“color">
More Syntax!
• Horizontal Line– <hr>
• Changing Font– <font> Change the font of this text </font>– Changing font has many different attributes– Other tags also have attributes
Attributes of Tags
• <font color=“blue”> Blue text </font>• <font size=“1”> small text </font>• <font face=“Arial”> Arial text </font>
• You can put all attributes into one tag:– <font color=“blue” size=“1” face=“Arial”>
Changed text font</font>
Deprecated Tags
• <b>, <u>, <i> have been deprecated• HTML wasn’t meant to be about styling– This is why we have CSS
• Instead use <strong> and <em>
• For <font>, we have to use <span> with CSS
Deprecated Tags cont.
• “In HTML 4, several tags and attributes were used to style documents. These tags are not supported in newer versions of HTML.”
• “Avoid using the elements: <font>, <center>, and <strike>, and the attributes: color and bgcolor.”
*From http://www.w3schools.com/html/html_css.asphttp://www.tutorialspoint.com/html/html_deprecated_tags.htm
Making an Image Your Background
• For color:<body bgcolor=“color">
• For background image:<body background="bgimage.jpg">
Linking Web Pages
• <a href=“url_here”> Link Text </a>• The URL can be a page you created or an
external link (MUST HAVE HTTP)
• <a href=“aboutme.html”> About Me </a>• <a href =“http://www.mtsu.edu”> MTSU </a>
MTSU
Useful Attributes for Links
• Target=“_blank” – opens the link in a new window
• Title=“” – the alt text of the link
• Can anchor pages:– <a name=“myanchor"></a> – Click <a href="#myanchor">here</a> to go to the
anchor.
Lists
• Two types of lists– Ordered:
1. First entry2. Second entry3. Third entry
– Unordered• Entry• Entry• Entry
Ordered Lists
<ol><li> First Entry </li><li> Second Entry </li>
<li> Third Entry </li></ol>
Order List Attributes
• Compact – less space between lines and indentation– <ol compact="compact">
• Start – specifies the start number– <ol start="50">
• Type – specifies the type of order (1, A, a, I, i)– <ol type="I">
Unordered Lists
<ul><li> Entry </li><li> Entry </li>
<li> Entry </li></ul>
Unordered Lists Attributes
• Compact– <ul compact="compact">
• Type (disc, square, circle)– <ul type="square">
Lists Within Lists
1. First Entry– Sub Entry– Sub Entry
2. Second Entry– Sub Entry
3. Third Entry
<ol> <li> First Entry </li> <ul> <li> Sub Entry </li> <li> Sub Entry </li> </ul> <li> Second Entry </li> <ul> <li> Sub Entry </li> </ul> <li> Third Entry </li></ol>
Inserting Images
• Two ways to insert:– Put the Internet link– Download the image, link it
– <img src=“www.some_site.com/image.jpg” />– <img src=“image.jpg” />
Making a Picture a Link
• <a href=“url”> <img src=“image.jpg” /> </a>
Attributes of Inserting Images
• Alt – the alternative text of the picturethis shows up when you scroll over an
image• Width – specifies the width of the image• Height – specifies the height of the image• Align – specifies the alignment (top, bottom,
middle, left, right) (Going to use CSS for this)• <img src=“image.jpg" alt=“My Picture"
width="304" height="228" />
What is the Difference?
• Saving: have to download the image– Include the location and image name.
• Link: You just include the URL– Taking up the resources of whatever site you got
the link from
Tables
• <table> </table> : Start and end of the table• <tr> </tr> : Start and end of a row• <th> </th> : Start and end of a header cell• <td> </td> : Start and end of a table data cell
Tables
<table><tr>
<th> Header 1 </th><th> Header 2 </th>
</tr><tr>
<td> Data 1 </td> <td> Data 2 </td> </tr></table>
Header 1 Header 2Data 1 Data 2
Attributes of Tables
• Table: align, bgcolor, border, cell padding, cell spacing, frame, rules, summary, width
• th and td: abbr, align, axis, bgcolor, char, charoff, colspan, height, nowrap, rowspan, scope, valign, width
• tr: align, bgcolor, charoff, valign
The <span> tag
• Instead of <center> : <p style=“text-align:center;”> Centered Text </p>
• Or <h1 style=“text-align:center;”> Centered Header </h1>
The <span> tag cont.
• Instead of <font color=“blue>:<span style=“color:red;”> Text </span>
• For multiple attributes:<span style="font-family:arial;color:red;font-size:20px;"> Text </span>
• Can also be applied to other tags:<p style="font-family:arial;color:red;font-size:20px;">
For Background Color• <body style="background-color:yellow;">• Background Image: <body style="background-
image:img.jpg;">
• Background of a Header or other tag:
<h2 style="background-color:red;">Heading 2</h2>
<p style="background-color:green;">This is a paragraph.</p>
Extra Stuff
• Marquee - http://www.quackit.com/html/codes/html_marquee_code.cfm
• Embed Youtube videos:– Go to a youtube video:
http://www.youtube.com/watch?v=jofNR_WkoCE– Click Share, next to About– Click Embed, next to Share this video– Copy the text and paste into your website
Changing your Webpage Layout
• Div: http://www.w3schools.com/html/html_layout.asp
• Div stands for division:– Menus and Sidebars and more
Using Divs
• You can divide up your page to create banners, sidebars, main content, footers, headers, etc.
• http://www.mtsu.edu/• https://cs.mtsu.edu/~mw3n/• http://w3schools.com/css/tryit.asp?filename=
trycss_float6
Styles to use with Div
• Width – specifies the width of the division• Height – specifies the height of the division• Color – color of the text inside the division• Background-color• Background-image• Display• Float• Text-Align
