HTML Foundations, pt 2

HTML Foundations, pt 2
22-3375 Web Design I // Columbia College Chicago

Anatomy of an Element  

<tag>Content</tag>
An HTML element includes both 
the HTML tag and everything between  
the tag (the content).


<tag>Content</tag> 

The element tag gives the  
content structure and meaning.


<tag>Content</tag> 
Tags normally come in pairs. The
first tag is the start tag, and the second 
tag is the end tag.


<h1>Main Headline</h1> 
HTML has a defined set of tag  
names (also called keywords) that  
the browser understands.

The essential element tags so far 
Primary 
Structure

Head  
Elements

Body 
Elements

html

title

p

head

meta

br

body

h1 – h6
ul
ol
a
img


<html lang=”en”></html> 
Most elements can have attributes, 
which provides additional informatin 
about the element.


<div class=”left-nav”></div> 
Attributes always follow the same 
format: name=”value”. You can use  
either single or double quotes.

The essential attributes so far 
html  

<html lang=”en”></html>

meta  

<meta charset=”utf-8”>

link  

<link rel=”stylesheet” type-”text/css” href=”stylesheet/styles.css”>

img  

<img src=”images/image.jpg” alt=”Sam”>

a 

<a href=”http://colum.edu”>My school</a>

Properties 

What are properties?
While attributes provide additional information
about a specific element’s content, every element
type has a set of default properties that define how
that element will be shown in the browser.

Properties 

Element

Properties

human

name=”Liam” 
gender=”male” 
age=”5”

!
!

Block and Inline elements
One important default style applied to elements is whether
they are block or inline. This is called their display property
(we will talk about properties when we get to CSS).
A block element takes up the full width available to the
element, and forces a line above and below. Examples include
<p>, <div>, <ul>, <blockquote> and all headers.  

another element
block element
another element

another element

Block and Inline elements
A inline element can be inserted within block elements or
other inline elements and do no create additional space or
line breaks. Examples include <img>, <em>, <strong>,
<a>, and <span>.  

<p>
<p></p>
<p></p>

<a></a>

</p>

Class Exercise
!

Open ‘elements.html’ in bbedit
and create tags around the
unstructured text.

<a></a> 

The <a> element is an inline  
tag that works anywhere in the  
body to create a hyperlink.

EXAMPLE 

<a href="aboutme.html">About Me</a> 
<a href="http://www.colum.edu">My school</a> 

<a> tags are always used in pairs,
wrapping the content you want to activate
as a link. If you use an absolute URL, it
must start with “http://”.

Relative vs Absolute links
Whenever you link to a file with an ‘href‘ (hypertext reference )
or ‘src’ (source) attribute, you are providing the browser and
address to the resource. That address can be relative or
absolute. 
root directory (www.mysite.com)
index.html
images
logo.png
report.pdf
stylesheet.css

!

A relative link is relative to the resource’s location in its
directory. It is like saying “the restaurant is 2 blocks away.” 
In the example below, if ‘logo.png‘ were linked from the
homepage (index.html), the tag would be:
<img src=”images/logo.png”> 
index.html
images
logo.png
report.pdf
stylesheet.css

An absolute link is the full address to the resource’s location in
the entire web. It is like saying “the restaurant is at 222 West
Grand, Chicago IL 60625.”
<img src=”http://www.mysite.com/images/logo.png”> 

index.html
images
logo.png
report.pdf
stylesheet.css

Room 902 

<a href=”

”>

Room 901 

Room 902 

Room 903 

9th Floor 

9th Floor/Room 902/

Room 901 

Room 902 

Room 903 

9th Floor 

../Room 902/
Two dots in front of a forward slash means:  
“step up one directory.” In this example it says:  
“step out of room 903 and then back into room 902, talk to

“

Room 901 

Room 902 

Room 903 

+ 

8th Floor 

9th Floor 

10th Floor 

+ 

+ 

Mich Ave 
Campus 

Wabash 
Campus 

Book & Paper
Center 

+ 

+ 

University 
of IL 

Columbia 
College 

SAAIC 

+

Relative link to root
A relative link (does not start with “http://”) with a slash at the
beginning forces the link to start at the root of the website. This
will only work on the server, not when you are working locally.
/Columbia College/Wabash Campus/9th Floor/Room 902/ 

Absolute links
Absolute links are typically used for linking to pages or files
outside of your site’s directories.
http://Columbia College/Wabash Campus/9th Floor/Room 902/

The index file
When an absolute link is directed to a folder, the browser
needs to know which file to open. By default, it looks for a file
named “index” (the extension is not important, usually is it
index.html, or index.php). This is why the homepage is always
named “index”.
So, <a href=”http://www.mysite.com/”> and  
<a href=”http://www.mysite.com/index.html”> will open the
same file. 

index.html
images
logo.png

Class Exercise
!

Open the folder  
‘linking exercise” for a tutorial

What are tables?
Tables are html elements that are used for
presenting rows and columns of tabular data.
Tables are always created using three or more
nested tags (at a minimum: table, tr, td)
For many years, designers used tables for layout,
which is now done with CSS, except in certain
scenarios (mainly for html emails).

table
thead
tfoot
tbody
tr
th
td

<table></table> 

The <table> tag defines and 
encloses the entire HTML table.

<thead></thead> 

The <thead> tag is used to group  
header content in an HTML table.

<tfoot></tfoot> 

The <tfoot> tag is used to group  
footer content in an HTML table.

<tbody></tbody> 

The <tbody> tag is used to group  
the body content in an HTML table.

<tr></tr> 

The <tr> tag defines  
a row in an HTML table.

<th></th> 
<td></td> 
These tags are the actual data cells: 
“table header” and “table data”.
Use <th> if the cell is inside <thead> tags.

EXAMPLE 

from www.w3schools.com

<th colspan=”2”></th> 
<td colspan=”2”></td> 

If your td or th element needs to  
span over another column, use the 
colspan attribute.

EXAMPLE 

Every <tr> element in a table must contain the same number of cells, unless a
‘colspan’ element is used. In the example above, the first row has a cell that is
using colspan=”2” to make a single cell take the space of two cells.

EXAMPLE 

Every table must have table, tr and td (or th)
tags. Marking up the header and body is
good practice, but not essential.

Class Exercise
!

Open ‘table-exercises.html’ in
bbedit and create two tables from
the un-marked-up content.

What is a form?
HTML borrows the concept of a form to refer to
different elements that allow you to collect
information from visitors on your site.

How do HTML forms work?
HTML form elements provide temporary storage for
the information the user enters into the form. When
the user clicks “submit,” the values are collected
and sent to a server. The server processes the form
data and sends back a new page (a response).

form 

server

There are three basic types  
of form controls, for:

Adding Text
Making Choices
Submitting Forms
Uploading Files

Adding Text

 
Text Input 

Password Input 

Text Area

Making Choices

 
Radio Buttons 

Checkboxes 

Drop-downs

Submitting Forms

 
Submit Buttons 

Image Buttons 

Buttons

Uploading Files

 
File Upload

<form></form> 

The <form> tag is used to create an HTML form
for user input.

<form action=”http://www.mysite.com/
process.php”>
</form> 

The <form> tag contains the attributes that tell
the browser how to handle the data when user hits
‘submit’. The essential, won’t-work-without-it,
attribute is “action”. This is server address where
the browser will send the data.

<form>
<input>
</form> 
<input> elements are used within a <form>
element to declare input controls that allow users
to input data.
<input> is an inline, self-closing tag.
An input field can vary in many ways, depending
on the type attribute.

<form>
<input type=”text” name=”username”>
</form> 
The <input> tag should always have, at a
minimum, a type and name attribute.
The “type” attribute controls the form type (text,
radio, dropdown, etc), and the “name” attribute is
how you identify the data when it is sent to the
server.

Input Attributes: type 

You create the different type of form
elements through the “type” attribute.
These include:  
text, password, radio, checkbox, select,
file, submit, image, and hidden.

Input Attributes: type 

For example:
<input type=”text”>
would create this:

Input Attributes: name 

You then need to add a name so the data
can be identified by the server:
!

Input Attributes: name 

The data that is sent to the server is sent as a
“name/value pair”. For example, if the user entered
“Sarah” into the text box:
The server would receive:
username=”Sarah”
!

Class Exercise
!

 
Create a form for our tutorial:

Text input (name)
Dropdown (favorite color)
Radio (human or robot)
Text area (comment)
Submit

Adding Text: Examples

 
Text Input


 
Text Input 

You can add additional attributes to your text
inputs to control their width (size, in characters),
and maxlength (in characthers). You can also
control the width of the input field in your css
(in pixels, % or ems).


 
Text Area 

Text areas are a bit different: they are not
contained in an <input> tag, and they require a
closing tag (<textarea></textarea>.

Making Choices: Checkboxes

 
Checkboxes 

With checkboxes and radio buttons, the
“name” attribute creates the grouping
between the options. The “value” attribute
tells the server which option the user selected.
add a “checked” value if you want an option to
be preselected.

Making Choices: Radio Buttons

 
Radio Buttons 

Use a radio button when the user can only
select one option. Like checkboxes, add a
“checked” value if you want an option to be
preselected.

Making Choices: Dropdowns

 
Drop-downs 

Dropdowns are made up of two opening and
closing tags: <select> and <option>. Whatever
option appears at the top is the default, unless
you add a “selected=”selected” attribute to
the option tag.

Submitting Forms: Submit

 
Submit 

A simple <input type=”submit”> is the easiest
way to add a submit button to your form. You
can hook onto this element in css by using the
pseudo selector input[type=submit].

Submitting Forms: Image

 
Image 

<input type=”image”> allows you to replace
the standard submit button with an image of a
submit button. This method is not
recommended.

Submitting Forms: Button

 
Button 

Inside a <button> element you can put
content, like text or images. This is the
difference between this element and buttons
created with the <input> element.

<form>
Your Name<br> 
<input type=”text” name=”name”><br>
Your Email<br> 
<input type=”text” name=”email”><br>
<input type=”submit”>
</form> 
There are a few ways to add labels to your form
elements. The simplest way is to just add
unmarked up text with <br> elements.

<label for=”name”> 
Your Name 
<label><br>
<input type=”text” name=”name” id=”name”>
Another way is to use the “label” element. It can
wrap both the label and input, or stand outside of
the input. You can style the label element in css.
If you use this method, you should add a “for”
attribute to the label that matches the id of the
form element (not required, but good for
accessibility reasons).

<label>
Your Name<br> 
<input type=”text” name=”name”>
<label>

You can also wrap the entire element in the
label tag. Both used of the label tag give your
radio and checkboxes the added feature of
making the entire field clickable.

HTML Foundations, pt 2

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (6)

Similar a HTML Foundations, pt 2

Similar a HTML Foundations, pt 2 (20)

Más de Shawn Calvert

Más de Shawn Calvert (12)

Último

Último (20)

HTML Foundations, pt 2