Designing Web Pages
Download
Report
Transcript Designing Web Pages
Designing Web Pages
Getting to know 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.
What is HTML?
•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.
Notepad in Windows is the easiest
•The program
ways to write HTML.
Getting Started...
•Your homepage
page) MUST
be titled index.html because this
is the way almost all host servers
are set up to handle the main
page of your site.
st
(1
Using “index.html”
•Most HTML Tags work in pairs. (Does that make these
dynamic duos ‘tag teams’?).
•Tags make up the entire structure of an HTML document.
< >__</> When you place something within these you are
making it known as a tag. Tags define what is within them.
•For example: the <b> </b> tags are saying to start and stop
bold text. The tag with the slash (/) is known as the closing
tag.
<b> This text is bold</b>
What are tags...
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 or body). The body contains most
everything else.
Example of a basic HTML document:
<!DOCTYPE> (defines the page for web browsers).
<html> (Defines everything in your document and sets the boundaries).
<head> (contains document title, used by search engines, doesn’t appear in the webpage).
<title> Title goes here</title> (created within the head, displays at the
top of the browser window).
</head>
<body> (contains text, headings, links, graphics, sound etc.)
Body goes here
</body>
</html>
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. These are similar to titles.
•The opening tag for a heading is <h_> and the closing </h_>
__being the size of the heading…from 1 to 6. (1 being the
largest and 6 being smallest) Ex.<h1>Headings</h1>
Sample Headings...
Today is a good day. H1
<h1>Today is a good day.</h1>
Today is a great day. H2
<h2>Today is a great day.</h2>
Today is a marvelous day. H3
<h3>Today is a marvelous day.</h3>
Today is a wonderful day. H4
<h4>Today is a wonderful day.</h4>
Today is a neat day. H5
<h5>Today is a neat day.</h5>
Today is a fabulous day. H6
<h6>Today is a fabulous day.</h6>
•If you want your text to start on a new line (similar to
pressing enter) you need to insert a line break.
• Tag for a line break is <br> There is NO ending tag, but
being consisted is a good habit to follow </br>.
•Example w/o Line Break:
Sentence one. Sentence two. Sentence three.
•Example with Line Break:
Sentence one.<br>
Sentence two.<br>
Sentence three.<br>
The Line Break...
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.
<br> - adds single space
<p> - adds double space
Creating Unordered Lists
Unordered List: uses bullets
<ul>
<h4>Classes</h4>
<li> Computers </li>
Classes
<li> Multimedia</li>
•Computers
•Video Gaming 2
• English
<li> TV/Digital Production</li>
</ul>
Tags for List - <li></li>!
Creating Ordered Lists
Ordered List: numbered
<ol>
<h4>Classes</h4>
<li> Computers </li>
Classes
1. Computers
2. Video Gaming2
<li> TV/Digital Production</li>3. English
</ol>
<li> Multimedia</li>
Tags for List - <li></li>!
•Common formatting tags:
<b>bold</b>
<i>italics</i>
<hr>horizontal line</hr> or <hr>
<br>break</br> or <br>
<u>underline</u>
<center>Center</center> or <h1 align=center ></h1>
<li>list</li>
<font size=n> </font> or <h1></h1>
<font color=“red”> </font color>
Text Formatting Properties...
•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.
•A plain <hr> with no attributes will make the line the full
width of the screen.
Horizontal Ruled Lines...
•Setting alignment:
•LEFT - <h1 align=left>Left </h1>
•CENTER
•<h1 align=center>Center </h1>
•RIGHT
•<h1 align=right>Right </h1>
Text after the ‘red’ is what will be seen on web page.
Center applies to ‘heading’ only.
Tags can also have attributes, which are extra bits of information.
ALIGN Attributes...
•To add a link - <a href=“location”> Link Title</a>.
Whatever appears between these two tags will become
underlined and colored, and if you click on the underlined text
it will send the browser to the location within the quotes.
•Example of link:
Visit <a href=“http://us.blizzard.com/en-us/”> the best Video
Gaming Company ever! Site</a>!
•To insert a link from your page, copy the URL into your
index.html page.
Links...(Hypertext Reference)
•Although links are usually used to send people to other web
pages, you may also use it to send e-mail to a specific address
by using a location of mailto:user@host.
•Example of a Mailto: Link…
Send e-mail to <a
href=“mailto:[email protected]”> Ms. Julie
MacLeod</a>!
•To insert your email, copy your address into your index.html
page.
E-Mail Links...
•Make sure images are in the gif or jpg (or jpeg) file formats.
You won’t be able to use .bmp format files!
•Tag: <img src=“location”> THERE’S NO CLOSING TAG!
•Example: <a href="http://www.example.com/"><img src="URL"
alt="Alternate Text"></a>
•To insert an image from another webpage you must copy the
code into your index.html page.
•Once an image is located > right click on image > Properties
> copy source > paste into the <img src> tag.
Images...(Image Source)
The BODY Attributes...
•Can change link colors in body tag…
EXAMPLE: <body bgcolor=blue>
•Can add ‘moving’ text to page
EXAMPLE: <marquee> Video Gaming ROCKS!
</marquee>
•Center email and link
EXAMPLE: <center> Goals </center>
•Create a ‘horizontal’ rule
EXAMPLE: <hr>
Now let’s
practice!!!
Practice creating a page using the
‘basic’ formatting tags.
(www.w3schools.com).
http://www.pageresource.com/html/
http://www.easywebtutorials.com/index.php
Intro
Getting Started
Basic
Elements
Attributes
Heading
Paragraphs
Links
Images
Tutorials