Demo Web Elements

Download Report

Transcript Demo Web Elements 

HTML/XHTML
Structure
Building a basic web page
using notepad.
Document Structure
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang = "EN" xml:lang = "EN" dir = "ltr">
<head>
<title>Enter The Title Here</title>
</head>
<body>
</body>
</html>
Change the Title Tag

When using the template, remember to
change the title tag content.
Tags





<> and </>
Case sensitive
Open and closed
Empty elements must be closed
Multiple tags must be properly
nested
The cat jumped over the
fence.
The cat jumped <b>over</b> the fence.
The cat jumped over the
fence.
The cat jumped <b><i> over</i></b>the
fence.
Headings


Bob fell over the
chicken. [H1]
Bob fell over the chicken. [H6]
There are six heading sizes
H1-H6
<h1>Bob fell over the chicken.
[H1]</h1>
<h6>Bob fell over the chicken.
[H6]</h6>
Changing Colors
This is a H1 heading with color.
Example:
<h1><font color=#ff0000>This is a H1 heading with color.</font></h1>

Color codes are available at
http://www.w3schools.com/html/html_colors.asp
Background Color
<head>
<style type="text/css">
body {background-color: #aa1133}
</style>
</head>
Enter style type tag between
the head tags
“Try it” editors
http://www.w3schools.com/css/cs
s_background.asp
Paragraph and Formatting
Used for a block of text. It can
be for one sentence or 1000. I
don’t recommend a block of
text of a thousand sentences.
<p>Used for a block of text. It
can be for one sentence or
1000. I don’t recommend a
block of text of a thousand
sentences.</p>
This is BOLD.
This is <b>BOLD</b>.
This is italics.
This is <i>italics</i>.
Bob
and Tom are funny.
<font size=-1>Bob</font> and
<font size=+3>Tom</font> are
funny.
Horizontal Rule
___________________
<hr />
___________________
<hr size=7 />
______
<hr width=50 />
______________
<hr width=70% />
______________
<hr size=7 width=70% />
Line Breaks


HTML will word wrap unless
you use line breaks.
No closing Tag
First sentence. Second sentence.
Third sentence. Fourth
sentence.
First sentence. Second sentence.
Third sentence. Fourth
sentence.
First sentence.
Second sentence.
Third sentence.
Fourth sentence.
First sentence.<br />
Second sentence.<br />
Third sentence.<br />
Fourth sentence.<br />
Align Attribute
Align left
align=left
Align center
align=center
Align right align=right
Example:
Go Colts! <H1 align=right>Go
Colts!</H1>
Center
This is centered.
<center>This is centered
</center>
The center tag can be used for
one item or for a whole
section.
Unordered List





Monitor
Keyboard
CPU
Speakers
Mouse
<ul>
<li>Monitor
<li>Keyboard
<li>CPU
<li>Speakers
<li>Mouse
</ul>
Ordered list
1.
2.
3.
4.
5.
Monitor
Keyboard
CPU
Speakers
Mouse
<ol>
<li>Monitor
<li>Keyboard
<li>CPU
<li>Speakers
<li>Mouse
</ol>
Pictures



Use .jpeg
Make sure image is
saved in your .html
folder.
<img src=“filename“ />
<img src=“german shepherd.jpeg“ />
Hyperlinks
Yahoo
<a href="http://www.yahoo.com/">Yahoo</a>
Getting Started






Create a folder called your_name website
Start notepad (Start →Accessories→Notepad)
 Click File → Save As
 Rename it your_name.html
 Save it in the your_name website folder
Save your image in your_name website folder
Open your browser
 File → Open → your_name.html → Open
Keep your browser open as you work on your web page
When you edit your .html, save it then go to your
browser and click refresh. You will see the changes you
made.
Final Project


Create a REAL Family holiday recipe webpage (any holiday you
like).
Your website should include the minimum following format and
structural elements (you may need to add more for aesthetic
purposes):









Title
Two different heading sizes
A horizontal rule and a line break
Formatting to include bold, italics, and two different font sizes
Web link to a website related to your primary ingredient
A picture of the finished product
One ordered and one unordered list
A short description using <p></p> tags
Colored background and some colored text.
Final Project
The following criteria will influence the
grading of your project.
 Your project:

 must
contain all required format and structural
elements plus content.
 must be done in notepad saved as an html. If you use
a web editor like FrontPage or Word you will get a
ZERO.
 should be visually pleasing and organized.
 should work. Your web link should go to a real
working website. Your image should appear on your
website.
Submitting your work.



When complete, zip the contents of website folder and
place the zip file into the drop box.
To zip your work (in XP)
 Highlight folder contents
 Right click
 Send to
 Compressed folder
The zipped file will be created in your website folder.
Submit your zipped file to the drop box.
Helpful Links





http://www.htmlgoodies.com/
http://www.htmlhelp.com/reference/html40/olist.html
http://werbach.com/barebones/barebones.html
http://www.w3schools.com/html/default.asp
http://www.w3schools.com/html/html_colors.asp