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."
1. Paragraphs
The paragraph tags are: <p> </p>
To practice basic paragraph tags, click here:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_paragraphs1
To practice making larger paragraph tags, click here:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_paragraphs2
Open your HTML document in your chosen text editor, and then type the correct coding so that your paragraph looks like this when you open the HTML file in your web browser:
This is [your name]'s first paragraph
This is [your name]'s second paragraph
This is [your name]'s third paragraph
The paragraph tags are: <p> </p>
To practice basic paragraph tags, click here:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_paragraphs1
To practice making larger paragraph tags, click here:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_paragraphs2
Open your HTML document in your chosen text editor, and then type the correct coding so that your paragraph looks like this when you open the HTML file in your web browser:
This is [your name]'s first paragraph
This is [your name]'s second paragraph
This is [your name]'s third paragraph
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.
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.
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.
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.
5. Aligning Headings
An example of using heading alignment tags: <center><h1>________</h1></center>
To practice different alignments, click here:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_header
In your HTML file, use correct coding to create headings with center, right, and left alignments.
An example of using heading alignment tags: <center><h1>________</h1></center>
To practice different alignments, click here:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_header
In your HTML file, use correct coding to create headings with center, right, and left alignments.
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."
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.
<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, check out the color codes chart at http://www.htmlcolorcodes.org/
<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, check 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:
<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
<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.
.......<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.
<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!
<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.
<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.
15. Creating Unordered (Bulleted) Lists
<ul> </ul> indicates an unordered (bulleted) list
<li> </li> indicates a list item
Try making a list of your 4 favourite foods
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_lists4
Add it to your HTML file.
<ul> </ul> indicates an unordered (bulleted) list
<li> </li> indicates a list item
Try making a list of your 4 favourite foods
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_lists4
Add it to your HTML file.
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
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:
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.
<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.
18. Inserting Text Entry Fields
You can create fields that require a user to enter various text elements, like a name, address, etc.
<form action=" ">
Try changing the text fields' names:
http://www.w3schools.com/HTML/tryit.asp?filename=tryhtml_input
Insert a text entry field into your HTML document.
You can create fields that require a user to enter various text elements, like a name, address, etc.
<form action=" ">
Try changing the text fields' names:
http://www.w3schools.com/HTML/tryit.asp?filename=tryhtml_input
Insert a text entry field into your HTML document.
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.
Powered by
No comments:
Post a Comment