Designing Web Pages

1
Designing Web Pages

• Getting to know HTML...

2
What is HTML?

• Hyper Text Markup Language

• HTML is the major language of the Internets
• World Wide Web

• Web sites and pages are written in HTML

3
Getting Started...

• By learning HTML youll have more control over
  how your web pages look, and youll more easily
  discover ways to make your pages look better.

• HTML is platform independent, meaning it can be
  viewed on any type of computer.

• The program Notepad in Windows is one of the
  easiest ways to write HTML.

4
Finding a Host Service (Web Server)

• You need to find a company thats willing to host
  (serve) your web site.

• You can use a free home page host. Most of these
  show banners on your site so they can pay for
  their servers.

• When signing up for free host you get to choose
  your own username and password. Your username is
  generally the directory people type to get to
  your site, so choose wisely!

5
Writing your Files...

• Create folder to keep files in, BE ORGANIZED!

• Windows 3.11 or older, cant save a file as .html
  because they can only use a 3 letter file
  extension - .htm. acts exactly the same as .html

• Caution - you can have one file called mycat.html
  and one called mycat.htm on your host and they
  are 2 completely separate files!

6
Using index.html

• Your main web page file MUST be titled
  index.html, because this is the way almost all
  hosts servers are set up to handle the main page
  of your site.

• WINDOWS 95/98 users notepad will automatically
  name file index.html.txt To get around this when
  you save an html file type quotation marks around
  the file, index.html this tells notepad not to
  use the default .txt extension.

7
What are tags...

• Tags make up the entire structure of an HTML
  document. lt and /gt When you place something
  within these you are making it known as a tag.
  Tags define what is within them.

• For example the ltbgt tag is saying to start bold
  text, and the lt/bgt tag is saying to stop bold
  text. The tag with the slash (/) is known as the
  closing tag.
• ltbgt This text is boldlt/bgt

• Tags in HTML arent case sensitive

8
Document Structure...

• HTML documents have 2 parts, the head and the
  body.

• The head contains the documents title and
  similar information (this info does NOT show on
  your page). The body contains most everything
  else.

• Example of basic HTML document structure
• lthtmlgt
• ltheadgt
• lttitlegt Title goes herelt/titlegt
• lt/headgt
• ltbodygt
• Body goes here
• lt/bodygt
• lt/htmlgt TYPE structure
  on your page

9
Headings...

• Headings are some of the most important tags
  within the body of your HTML document.

• Usually use headings to tell what the following
  section of your page is about.

• The opening tag for a heading is lthygt and the
  closing lt/hygt y being the size of the
  headingfrom 1 to 6. (1 being the largest and 6
  being smallest) lth1gtHeadingslt/h1gt

10
Sample Headings...
Today is a good day. H1 lth1gtToday is a good
day.lt/h1gt Today is a good day. H2 lth2gtToday is a
good day.lt/h2gt Today is a good day. H3 lth3gtToday
is a good day.lt/h3gt Today is a good day.
H4 lth4gtToday is a good day.lt/h4gt Today is a good
day. H5 lth5gtToday is a good day.lt/h5gt Today is a
good day. H6 lth6gtToday is a good day.lt/h6gt
Include this on your page
11
Horizontal Ruled Lines...

• Horizontal Ruled Lines are used to separate
  different areas of a web page.

• The tag is lthrgt IT DOES NOT HAVE A CLOSING TAG!

• You may add widthn (for setting pixel width) OR
  widthn for a certain percentage of the screen
  width.

• Sizen to make the line a certain pixel amount
  thick, and NOSHADE to turn the lines shading off.

• A plain lthrgt with no attributes will make the
  line the full width of the screen.
  Place a few on your page.

12
The Line Break...

• If you want your text to start on the next line
  (like when you press enter to get to the next
  line) you need to insert a Line Break.
• Tag is ltbrgt There is NO ending tag!

• Example without Line Break
• Sentence one. Sentence two. Sentence three.

• Example with Line Break
• Sentence one.ltbrgt
• Sentence two.ltbrgt
• Sentence three.ltbrgt Add to your
  page.

13
Paragraphs...

• You will often use paragraphs in HTML, just as
  you do when youre writing stories.

• The tag is ltpgt lt/pgt The closing tag is not
  always needed, but be safe and use it anyway.

Place two on your page. Notice the difference
between a ltbrgt and a ltpgt