Designing Web Pages

Download Report

Transcript Designing Web Pages 

Designing Web Pages
Getting to know HTML...
What is HTML?
•Hyper Text Markup Language
•HTML is the major language of the Internet’s
World Wide Web
•Web sites and pages are written in HTML
Getting Started...
•By learning HTML you’ll have more control over how
your web pages look, and you’ll 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.
Finding a Host Service
(Web Server)
•You need to find a company that’s 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!
Writing your Files...
•Create folder to keep files in, BE ORGANIZED!
•Windows 3.11 or older, can’t 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!
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.
What are tags...
•Tags make up the entire structure of an HTML document.
“<“ and “/>” When you place something within these you
are making it known as a tag. Tags define what is within
them.
•For example: the <b> tag is saying to start bold text, and
the </b> tag is saying to stop bold text. The tag with the
slash (/) is known as the closing tag.
<b> This text is bold</b>
•Tags in HTML aren’t case sensitive
Document Structure...
•HTML documents have 2 parts, the head and the body.
•The head contains the document’s title and similar
information (this info does NOT show on your page). The
body contains most everything else.
•Example of basic HTML document structure:
<html>
<head>
<title> Title goes here</title>
</head>
<body>
Body goes here
</body>
</html>
*TYPE structure on your page
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 <hy> and the closing </hy>
y being the size of the heading…from 1 to 6. (1 being the
largest and 6 being smallest) <h1>Headings</h1>
Sample Headings...
Today is a good day. H1
<h1>Today is a good day.</h1>
Today is a good day. H2
<h2>Today is a good day.</h2>
Today is a good day. H3
<h3>Today is a good day.</h3>
Today is a good day. H4
<h4>Today is a good day.</h4>
Today is a good day. H5
<h5>Today is a good day.</h5>
Today is a good day. H6
<h6>Today is a good day.</h6>
*Include this on your page
Horizontal Ruled Lines...
•Horizontal Ruled Lines are used to separate different
areas of a web page.
•The tag is <hr> IT DOES NOT HAVE A CLOSING TAG!
•You may add width=n (for setting pixel width) OR width=n%
for a certain percentage of the screen width.
•Size=n to make the line a certain pixel amount thick, and
NOSHADE to turn the line’s shading off.
•A plain <hr> with no attributes will make the line the full
width of the screen.
*Place a few on your page.
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 <br> There is NO ending tag!
•Example without Line Break:
Sentence one. Sentence two. Sentence three.
•Example with Line Break:
Sentence one.<br>
Sentence two.<br>
Sentence three.<br>
Add to your page.
Paragraphs...
•You will often use paragraphs in HTML, just as you do
when you’re writing stories.
•The tag is <p> </p> The closing tag is not always needed, but
be safe and use it anyway.
Place two on your page.
Notice the difference
between a <br> and a <p>