HTML Code - Cook's Classroom

Download Report

Transcript HTML Code - Cook's Classroom 

HTML Code
What we will cover







Basic HTML
Body
Font
Images
Hyperlinks
Tables
Frames
Code Rules





Almost all code works in pairs
Code must be written within carrots <
>
Ending code will have a slash </ >
CaSe InSeNsiTiVe
Must start all web documents with
<html>
Start a page

<html>


<head>



Tells the browser to decipher code based on
html rules
Mostly unseen code
Tells browser what other languages will be used
<body>


Mostly visible code
Content of page
<head>

Will contain the following code

<title>


<script>


Tells browser what, if any, scripting language
is being used
<meta>


Tells browser what to put in the title bar of
page
Designates meta tags for search engines
<link>

Directs CSS functions
<title>


Gives page a name
Should remain the same or similar for
entire site
<body>


All content that you want the viewer to
see is written here
Tag can be specifically modified



<background>
<bgcolor>
<bgproperties>
<body background>




Sets image in background of page
Can be very distracting
Must be very careful when using
<bgproperties>


Goes inside <body background> tag
Sets fixed image that the information
“floats” on
<body bgcolor>



Adds a color to the page
Most good websites use plain white
If choosing a different color, be sure to
choose a high contrast font color
<font>

Color


Face


Sets the color of the font
Sets the desired font name
Size

Sets the desired size, limited to 1 - 7
<basefont>




Sets a font for the entire page
Declared once immediately after
<body> tag
Can be overridden by other font tags
Good to use if you add a color to your
background
<font> modifiers

<b>


<i>


italics
<u>


bold
underline
<strike>

strikethrough
<font> alignment

<p>



<br>


Starts a new paragraph with a double
space
Can be aligned to left, center or right
Line break, no double space, unable to
align
<div>

Similar to <br> but can be aligned,
overrides <p>
Images




Images can make or break a web
Should be used cautiously and be sure
they are appropriate to the page
Must be careful when aligning
Can greatly increase load time of page
Images

<img
src=“http://www.website.com/pic.jpg”>


<img src=“pic.jpg”>


If located on another web
If located within same folder on your web
<img src=“images/pic.jpg”>


If located in images folder on your web
This is how we will do it
<img src>

Modifiers




Height
Width
Border
Align
Hyperlinks


Known as Anchor tags
<a href>



“Anchor Hyperlink REFerence
Used to link pages to each other within
a web
Used to link webs to each other
<a href>

To link to another page on same web


<a href=“PAGENAME.html”>
To link to another web


<a href=http://www.PAGENAME.com>
Must use http to send to another web on
the internet
Tables


Most widely used method of formatting
and arranging pages
Can be nested


Tables set inside other tables
Very heavy in coding, but pages look
better and control remains in the
hands of the designer
Tables

Consists of 4 sets of coding


<table>
<th>


<tr>


Table Header
Table Row
<td>

Table Data
<table>


<table> code starts table
Default settings




No border
Transparent color
Size defined by largest cell
Right aligned
<table>

Modifiers

Border


Bgcolor



Sets a visible border around the table and
each cell
Gives table a color
Width
Align
Important details



While the color of the table can be set
in the <table> tag, each cell is
INDEPENDENT of each other
Color, font, and alignment can all be
changed in each individual cell
Both a curse and a blessing


Gives ultimate control
Takes time to set each one
<th>

Table header



Sets a header for the table, commonly
used as a title
By default only one cell
Can be modified to span entire table

<th colspan=X>


X being the number of columns in the table
<th bgcolor=“color”>
<tr>





Begins a row
No displayable information
Simply used to format table
Can define color and alignment
Cannot define font style
<td>




Table Data
Sets individual cells
All displayed information goes in
between these tags
Highest priority formatting codes


Color, font, alignment, width
Colspan and rowspan allow for cell to
be merged
<table bgcolor=“green” width =100%>
<th colspan =2> This is a table </th>
<tr>
<td bgcolor=“blue”> This is the top left </td>
<td> <font size =7> This is the top right
</font> </td>
</tr>
<tr bgcolor=“pink”>
<td width=75%> This is the bottom left </td>
<td> This is the bottom right </td>
</tr>
</table>
Table Code Results
Frames



Formerly was a very popular method
to format and arrange pages
Fallen out of favor due to lack of
support from browsers and slightly
confusing coding techniques
Partitions a single page into multiple
“frames” for viewing several pages at
once
Frames


When using frames, <body> tag is not
used
<frameset>


Designates how the page is split
Must be modified with either rows or cols



<frameset cols=
<frameset rows=
* is used to designate remainder of the page
<frame src>


Just as <img src> places a picture on
screen, <frame src> places a webpage
in a frame
Does not need to be closed
Example of Frame code
<frameset cols="120,*">
<frame src="menupage.htm" name="menu">
<frameset rows="*,50">
<frame src="basic.html" name="main">
<frame src="bottombanner.htm"
name="bottom">
</frameset>
</frameset>
Frames Code Result