HTML Structure

1
HTML Structure

• Building a basic web page using notepad.

2
Tags

• The cat jumped over the fence.
• The cat jumped over the fence.

• ltgt and lt/gt
• Case sensitive
• Open and closed
• Empty elements must be closed
• Multiple tags must be properly nested
• The cat jumped ltbgtoverlt/bgt the fence.
• The cat jumped ltbgtltigt overlt/igtlt/bgtthe fence.

3
Document Structure

• lt!DOCTYPE html PUBLIC
• "-//W3C//DTD XHTML 1.0 Strict//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
  "gt
• lthtml lang "EN" xmllang "EN" dir "ltr"gt
• ltheadgt
• lttitlegtEnter The Title Herelt/titlegt
• ltstyle type"text/css"gt
• body color yellow background blue
• lt/stylegt
• lt/headgt
• ltbodygt

4
Change the Template

• When using the template, remember to change the
  title and the colors to match with your webpage.

5
Change the Tag Content

• lt!DOCTYPE html PUBLIC
• "-//W3C//DTD XHTML 1.0 Strict//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
  "gt
• lthtml lang "EN" xmllang "EN" dir "ltr"gt
• ltheadgt
• lttitlegtEnter The Title Herelt/titlegt
• ltstyle type"text/css"gt
• body color yellow background blue
• lt/stylegt
• lt/headgt
• ltbodygt

Rename title
Change the color of the text and background to
match your recipe
http//www.w3schools.com/html/html_colornames.asp
6
Body Tags

• lt!DOCTYPE html PUBLIC
• "-//W3C//DTD XHTML 1.0 Strict//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
  "gt
• lthtml lang "EN" xmllang "EN" dir "ltr"gt
• ltheadgt
• lttitlegtEnter The Title Herelt/titlegt
• ltstyle type"text/css"gt
• body color yellow background blue
• lt/stylegt
• lt/headgt
• ltbodygt

Enter your tags between the body tags
7
Headings

• Bob fell over the chicken. H1
• Bob fell over the chicken. H6

• There are six heading sizes
• H1-H6
• lth1gtBob fell over the chicken. H1lt/h1gt
• lth6gtBob fell over the chicken. H6lt/h6gt

8
Changing Colors

• This is a H1 heading with color.
• Example
• lth1gtltfont colorff0000gtThis is a H1 heading with
  color.lt/fontgtlt/h1gt
• Color codes are available at http//www.w3schools.
  com/html/html_colors.asp

9
Paragraph and Formatting

• Used for a block of text. It can be for one
  sentence or 1000. I dont recommend a block of
  text of a thousand sentences.
• This is BOLD.
• This is italics.
• Bob and Tom are funny.

• ltpgtUsed for a block of text. It can be for one
  sentence or 1000. I dont recommend a block of
  text of a thousand sentences.lt/pgt
• This is ltbgtBOLDlt/bgt.
• This is ltigtitalicslt/igt.
• ltfont size-1gtBoblt/fontgt and ltfont
  size3gtTomlt/fontgt are funny.

10
Horizontal Rule

• ___________________
• ___________________
• ______
• ______________
• ______________

• lthr /gt
• lthr size7 /gt
• lthr width50 /gt
• lthr width70 /gt
• lthr size7 width70 /gt

11
Line Breaks

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

• Start on next line
• No closing Tag
• First sentence. Second sentence. Third sentence.
  Fourth sentence.
• First sentence.ltbr /gt
• Second sentence.ltbr /gt
• Third sentence.ltbr /gt
• Fourth sentence.ltbr /gt

12
Align Attribute

• Align left
• Align center
• Align right
• Go Colts!

• alignleft
• aligncenter
• alignright
• Example
• ltH1 alignrightgtGo Colts!lt/H1gt

13
Center

• This is centered.

• ltcentergtThis is centered
• lt/centergt

14
Unordered List

• Monitor
• Keyboard
• CPU
• Speakers
• Mouse

• ltulgt
• ltligtMonitor
• ltligtKeyboard
• ltligtCPU
• ltligtSpeakers
• ltligtMouse
• lt/ulgt

15
Ordered list

• Monitor
• Keyboard
• CPU
• Speakers
• Mouse

• ltolgt
• ltligtMonitor
• ltligtKeyboard
• ltligtCPU
• ltligtSpeakers
• ltligtMouse
• lt/olgt

16
Pictures

• Use .jpg
• Make sure image is saved in your .html folder.
• ltimg srcfilename /gt
• ltimg srcgs.jpg /gt

17
Hyperlinks

• Yahoo

• lta href"http//www.yahoo.com/"gtYahoolt/agt

18
Sample

• lt!DOCTYPE html PUBLIC
• "-//W3C//DTD XHTML 1.0 Strict//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
  "gt
• lthtml lang "EN" xmllang "EN" dir "ltr"gt
• ltheadgt
• lttitlegtEnter The Title Herelt/titlegt
• ltstyle type"text/css"gt
• body color yellow background blue
• lt/stylegt
• lt/headgt
• ltbodygt
• lth1gtThis is an example of how several tags are
  usedlt/h1gt
• ltpgt I recommend using one tag per line. There are
  exceptions, such as ltbgtboldlt/bgt and
  ltigtitalicslt/igt to highlight specific words or
  phrases. The paragraph tag can span one or
  several lines. For large blocks of text use the
  paragraph tag multiple times, this way it is
  easier for the user to read.lt/pgt
• ltbr /gt

19
(No Transcript)
20
Getting Started

• Create a folder called your_name website
• Both your html file and your jpg file will need
  to be in the same folder together in order to
  work.

21
Getting Started

• Download the project.txt template from the
  syllabus website in your folder
• Open project.txt
• Select File?Save As and change project.txt to
  your_name.html
• Include quotes and when changing name of file
• Use underscore to separate your first and last
  name

22
(No Transcript)
23
Delete project.txt file
24
Editing Your Webpage

• Double click your_name.html to open it as a
  webpage in your browser
• Then Right-click your_name.html ? select open
  with ? notepad

25
Editing Your Webpage

• Notepad and your web browser should both be open
• You will use Notepad to edit and your browser to
  view what you edited
• Edit your .html file incrementally and save it
• Then go to your browser and click refresh. You
  will see the changes you made
• By saving and viewing your work incrementally you
  can limit any mistakes to the changes you just
  made
• Switch back and forth (editing and viewing) as
  you write your html.

26
Final Project

• Create a family tradition recipe webpage.
• Your website should include the minimum 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 and italics
• 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 of the recipe using ltpgtlt/pgt
  tags
• Colored background and some colored text.

27
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 with an html
  extension . If you use a web editor like
  FrontPage, Word, or Dreamweaver 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.

28
Submitting your work.

• When complete, zip the contents of website folder
  (html and jpg files) and place the zip file into
  the drop box.
• To zip your work (in XP)
• Highlight the files
• Right click highlighted files
• Send to
• Compressed folder
• The zipped file will be created in your website
  folder. Submit your zipped file to the drop box.

29
Helpful Links

• http//www.htmlgoodies.com/
• http//www.htmlhelp.com/reference/html40/olist.htm
  l
• http//werbach.com/barebones/barebones.html
• http//www.w3schools.com/html/default.asp
• http//www.w3schools.com/html/html_colors.asp