21
HTML/XHTML Structure Building a basic web page using notepad.

HTML/XHTML Structure Building a basic web page using notepad

Embed Size (px)

Citation preview

Page 1: HTML/XHTML Structure Building a basic web page using notepad

HTML/XHTML Structure

Building a basic web page using notepad.

Page 2: 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>

Page 3: HTML/XHTML Structure Building a basic web page using notepad

Change the Title Tag

When using the template, remember to change the title tag content.

Page 4: HTML/XHTML Structure Building a basic web page using notepad

Tags

The cat jumped over the fence.

The cat jumped over the fence.

<> and </> Case sensitive Open and closed Empty elements must be closed Multiple tags must be properly

nested

The cat jumped <b>over</b> the fence.

The cat jumped <b><i> over</i></b>the fence.

Page 5: HTML/XHTML Structure Building a basic web page using notepad

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>

Page 6: HTML/XHTML Structure Building a basic web page using notepad

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

Page 7: HTML/XHTML Structure Building a basic web page using notepad

Background Color

<head><style type="text/css">body {background-color: #aa1133}</style></head>

Enter style type tag between the head tags

“Try it” editorshttp://www.w3schools.com/css/

css_background.asp

Page 8: HTML/XHTML Structure Building a basic web page using notepad

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.

This is BOLD.

This is italics.

Bob and Tom are funny.

<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 <b>BOLD</b>.

This is <i>italics</i>.

<font size=-1>Bob</font> and <font size=+3>Tom</font> are funny.

Page 9: HTML/XHTML Structure Building a basic web page using notepad

Horizontal Rule

___________________

___________________

______

______________

______________

<hr />

<hr size=7 />

<hr width=50 />

<hr width=70% />

<hr size=7 width=70% />

Page 10: HTML/XHTML Structure Building a basic web page using notepad

Line Breaks

First sentence. Second sentence. Third sentence. Fourth sentence.

First sentence.Second sentence.Third sentence.Fourth sentence.

HTML will word wrap unless you use line breaks.

No closing Tag

First sentence. Second sentence. Third sentence. Fourth sentence.

First sentence.<br />Second sentence.<br />Third sentence.<br />Fourth sentence.<br />

Page 11: HTML/XHTML Structure Building a basic web page using notepad

Align Attribute

Align left

Align center

Align right

Go Colts!

align=left

align=center

align=right

Example:

<H1 align=right>Go Colts!</H1>

Page 12: HTML/XHTML Structure Building a basic web page using notepad

CenterThis is centered. <center>This is centered

</center>

The center tag can be used for one item or for a whole section.

Page 13: HTML/XHTML Structure Building a basic web page using notepad

Unordered List

Monitor Keyboard CPU Speakers Mouse

<ul>

<li>Monitor

<li>Keyboard

<li>CPU

<li>Speakers

<li>Mouse

</ul>

Page 14: HTML/XHTML Structure Building a basic web page using notepad

Ordered list

1. Monitor

2. Keyboard

3. CPU

4. Speakers

5. Mouse

<ol>

<li>Monitor

<li>Keyboard

<li>CPU

<li>Speakers

<li>Mouse

</ol>

Page 15: HTML/XHTML Structure Building a basic web page using notepad

Pictures

Use .jpeg Make sure image is

saved in your .html folder.

<img src=“filename“ />

<img src=“german shepherd.jpeg“ />

Page 16: HTML/XHTML Structure Building a basic web page using notepad

Hyperlinks

Yahoo <a href="http://www.yahoo.com/">Yahoo</a>

Page 17: HTML/XHTML Structure Building a basic web page using notepad

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.

Page 18: HTML/XHTML Structure Building a basic web page using notepad

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.

Page 19: HTML/XHTML Structure Building a basic web page using notepad

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.

Page 20: HTML/XHTML Structure Building a basic web page using notepad

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.

Page 21: HTML/XHTML Structure Building a basic web page using notepad

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