Today we will start with some simple coding.
HTML stands for
Hyper Text Mark-Up Language and is a set of codes or
<tags>. <Tags> are the instructions used to create Web pages.
Tags are always enclosed within angle brackets, called "
carats." An opening carat is:
< and a closing carat is:
>
The opening tag for an HTML document is always
<html> and the closing tag is always
</html>. Note that the
closing tag has the same command as the
opening tag, except that it has a
slash before the command. These tags tell the web browser that you are using (Firefox) that the document can be viewed as a web page.
HTML is not case sensitive, so it is ok to write the code tags in lowercase letters.
*** NOTE *** As
you move through the HTML unit, we will be creating personal web pages,
with pictures, images, etc. It is crucial that all of your images,
pictures, and HTML documents are
ALWAYS be saved in the same folder, so create a folder called
web page design inside your student folder, and always save everything for your web page there! You can leave it on the desktop of the computer you usually use.
For a text editor use: jsfiddle.net
It is free and easy to use.
Basic Tags
<html> defines the HTML document
<head> defines the head (or header) of the document
<body> defines the body of the document
<title> defines the title of the document; this appears in the title bar of the web browser window
<p> defines a block of text as a paragraph, and formats it accordingly
Click the link below to see how the basic elements of a webpage’s content is displayed:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
Each
student must create an HTML file titled p2[your name]htmlintro.html
using a text editor program (use either Text Wrangler or Text Edit), and
save it in the P2 folder (or if you've been able to log into your
student account on the server, you can create an "HTML work" folder
within your personal folder) on your computer in a sub-folder called
"HTML work". This process will be demonstrated in class using the Mac
file management application called "Finder."
2. Line Breaks
The line break tag is: <br>
*
Note: the line break tag is one of the few HTML tags that doesn't
require and opening and closing tag; instead it just uses <br> to
add a break in your HTML document.
To practice basic paragraph tags, click here:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_paragraphs
In your HTML document, use correct HTML coding so that it will look like this:
This is a
paragraph that [your name] created
using
line breaks.
3. Problematic Formatting
A
problem when coding HTML is that it will ignore any formatting that you
use in your text editor program, unless you specifically use HTML tags
to tell the web browser how the information in your HTML document should
be displayed. If you type the example below, you will see that the web
browser ignores the formatting of the poem used in the HTML file.
<html>
<body>
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
<p>Note that your browser ignores the layout in the HTML source code!</p>
</body>
</html>
Try adding line breaks to this example to make it look like a proper poem:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_poem
It should look like this:
My Bonnie lies over the ocean,
My Bonnie lies over the sea,
My Bonnie lies over the ocean,
Oh, bring back my Bonnie to me.
4. Headings
The tags used for headings are: <h1> </h1>, <h2> </h2>, etc.
You will see that the <h1> tag creates the biggest heading, while <h6> creates the smallest.
Click here to practice different headings and sizes:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_headers
Change the headings to your name and add them to your HTML file.
6) Formatting Text
Some examples of tags that will format text in your HTML files are:
<b>______</b>
<strong>_____</strong>
<i>_______</i>
<code>_______</code>
<sub>________</sub>
<sup>________</sup>
<u>_________</u>
Practice formatting the text by clicking the following link:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_formattingch
Create
a sentence that has a bolded word, an italicized word, an underlined
word, and use the superscript tag to write out "second" and "third."
7) Inserting a Horizontal Rule
<hr>
A
horizontal rule is a dividing line used to make clear distinctions
between different parts of a web page. Like a line break, it only has
one tag, rather than an opening and closing tag that most HTML coding
uses.
To practice inserting these dividing lines, click here:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_hr
Create a paragraph with three dividing lines separating parts of the paragraph.
8. Adding Color to the Background and to Paragraphs
<body bgcolor=“________”>
or
<body style="background-color:_____”>
You can also change the background colour of specific paragraphs by adding the style modifier to your paragraph tags:
<p style="background-color:red"</p>
To practice adding color to the background, click here:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_bodybgcol
In your HTML document, try changing the color of your the background to yellow, and the different paragraphs to
blue,
red,
pink,
green, and
orange!
If you want to use more specific colours, c
heck out the color codes chart at http://www.htmlcolorcodes.org/
9. Font Style Tags
<p “font-family:_______; color:____”> write your text here</p>
<p “font-size:#px”>write your text here</p>
*** NOTE *** to add more than one style attribute to a paragraph, use a semi-colon ; to separate the attributes.
Try changing the colors and fonts yourself by clicking the link below:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_bodybgcol
Make
your HTML document so that it has a pink background, with a font-family
of verdana, the background of the paragraph is yellow, the text in the
paragraph is red, and a font-size of 50.
It should look like this:
10. Inserting images with a heading and border
<h2> title of picture </h2>
<img border=“0” src=”________.jpg” width=“#” height=“#” />
or try a more simple way: <img src=_______.jpg; border=“2”>
***
IMPORTANT NOTE *** - When inserting images into your HTML file, the
image that you want to appear MUST be in the exact same folder as where
your HTML file exists. If your HTML file is in your P2\Aman Smith
folder, then the .jpg file (or .gif, or whatever format your image file
is) MUST be in the same folder, or you have to enter the path where the
image resides.
It is STRONGLY recommended that, in order to keep
your HTML files, images, etc. organized, you create an "images"
sub-folder within your "HTML work" folder, and you can keep all images
that you will be using for your various websites in that folder so that
they don't clog up your main folder. So when you add an image into your
HTML coding, it will look like:
<img src="\images\[name of
file].jpg"; border="[whatever value you like]"; width="[whatever value
you like]" height="[whatever value you like]">
Try changing border sizes here:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_mountain
In
your HTML document, write the correct coding so that when it is viewed
as a web page in a web browser there are two different photos that you
have saved to your computer
11. Aligning Images in Text
.......<img src=“________.jpg”
align= “bottom” width= “ # ” height= “ # ”>.......
Click here to practice changing the alignment and size of the pictures:
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_img_align
In
your HTML file, make a section that has the same image in five
different paragraphs, with each paragraph having the picture aligned
differently (one top aligned, one middle aligned, one bottom aligned,
one right aligned and one left aligned.
12. Floating Images in Text
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px">
Again, note that the different elements in a style tag are separated with a semicolon ( ; )
Try changing the image from floating on the left, to floating on the right
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_float
In your HTML file, show examples of an image floating on the left and right sides of different paragraphs.
13. Inserting an Image to the Background
<body background = "[location/name of image]">
Copy
the image location of another picture on the web and insert it in the
proper location in the tag. Click the link below to try it:
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_body_background
Try changing the body background image to an image that you've downloaded
*** remember that whatever images or pictures are used, must be in the same place as the html document ***
And choose an image that won't interfere with the font of your text!
14. Creating Hyperlinks
<a href="http://www.whateverwebaddress.com" target="_blank">clickable text</a>
Try changing the link to a different website such as YouTube, or another of your favourite sites.
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_links
Make sure your HTML file has at least two examples of links to other website.
16. Changing Bullet Styles
Bulleted
lists can use different styles of bullets, including dots, circles,
squares, etc. by indicating the type in the <ul> tag:
<ul type="disc,circle,square"> </ul>
Try changing the style of your bullets:
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_ul_type
In your HTML file, make sure you have at least two different types of unordered lists
17. Creating Ordered (Numbered, etc.) Lists
<ol> </ol> indicates an ordered list
<li> </li> indicates a list item
Just
like unordered lists, you can specify different styles of numbers,
letters, or Roman Numerals. Look closely at the different types of
headings that determine different styles of lists/
Note that the default unordered list would use regular numbers:
- like this
- like that
- like another
But you can use UPPER or lower case letters, Roman Numerals, etc. by indicating the type in the <ol> tag:
<ol type="A"> = upper case lettered list
<ol type="a"> = lower case lettered list
<ol type="i"> = lower case Roman numerals (i, ii, iii, iv, etc.)
<ol type="I"> = upper case Roman numerals (I, II, III, IV, etc.)
Try changing an ordered list:
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_ol_type
Ensure that you have at least two different types of ordered lists in your HTML file.
19. Inserting Password Fields
Password fields follow the same format as text fields:
<form action=" ">
<input type = "password" name = "password">
Practice working with password fields:
http://www.w3schools.com/HTML/tryit.asp?filename=tryhtml_inputpassword
Notice that text entered into a password field is displayed as asterisks.
Then insert a password field into your HTML document.
______________________________________________________________________
20. Inserting a Button
Buttons are also
form action commands, but the input type changes to "button" and the value determines what is displayed on the button:
<form action="">
<input value="Hello world!">
Experiment with using the button field:
http://www.w3schools.com/HTML/tryit.asp?filename=tryhtml_button
Add a button to your HTML file that has your name on it.
______________________________________________________________________
21. Using Text Input Fields and Buttons to Submit Information
Using
a combination of input fields and a submit button, information can be
forwarded to new files\locations. The action and method elements
determine where the information is sent to.
<form name="" action="demo_form_action.asp" method="get">
Experiment with creating text fields that will be submitted when a button is clicked:
http://www.w3schools.com/HTML/tryit.asp?filename=tryhtml_form_submit
Add text fields that would be submitted if a button was clicked on your HTML file.
______________________________________________________________________
22. Creating Checklists
Check
boxes are another form of form action commands, but the input type
element must be changed to "checkbox" and the text that appears after
the input type elements is what will appear next to the checkbox.
<form action="">
<input value=" "> This text will be next to the checkbox
</form>
Try creating different checklists:
http://www.w3schools.com/HTML/tryit.asp?filename=tryhtml_checkbox
Create a checklist that has at least three checkbox items on your HTML file.
______________________________________________________________________
23. Creating Dropdown Lists
Another form action command is creating dropdown lists. The option value determines what is in the dropdown list.
<form action="">
<option value="item1"> Item 1 </option>
Try it out here:
http://www.w3schools.com/HTML/tryit.asp?filename=tryhtml_select2
Create a dropdown list on your HTML document that has at least 4 different items that can be selected.
______________________________________________________________________
24. Creating Radio Buttons
Radio buttons are another form action element. When you select one radio button, all other choices are nulled.
<form action="">
<input >
Try it out here:
http://www.w3schools.com/HTML/tryit.asp?filename=tryhtml_radio
Then add a list of at least four radio buttons on your HTML file.
______________________________________________________________________
25. Creating Tables in HTML
Tables
are very important in HTML, as they are used not only to display data
in an organized, tabular format, they can also be used as a design tool
for building a webpage.
<table> indicates a table is being inserted
<tr> indicates the beginning of a table row
<td> indicates a cell in a table that contains data
Try working with tables, rows, and table data cells here:
http://www.w3schools.com/HTML/tryit.asp?filename=tryhtml_tables
Add a table into your HTML file that has at least four rows and four columns.
