Designing Web Pages
description
Transcript of Designing Web Pages
![Page 1: Designing Web Pages](https://reader036.fdocuments.net/reader036/viewer/2022062521/5681685e550346895dde9dbd/html5/thumbnails/1.jpg)
Designing Web PagesGetting to know HTML...
![Page 2: Designing Web Pages](https://reader036.fdocuments.net/reader036/viewer/2022062521/5681685e550346895dde9dbd/html5/thumbnails/2.jpg)
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.
![Page 3: Designing Web Pages](https://reader036.fdocuments.net/reader036/viewer/2022062521/5681685e550346895dde9dbd/html5/thumbnails/3.jpg)
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 the easiest ways to write HTML.
![Page 4: Designing Web Pages](https://reader036.fdocuments.net/reader036/viewer/2022062521/5681685e550346895dde9dbd/html5/thumbnails/4.jpg)
Using “index.html”
•Your homepage (1st 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.
![Page 5: Designing Web Pages](https://reader036.fdocuments.net/reader036/viewer/2022062521/5681685e550346895dde9dbd/html5/thumbnails/5.jpg)
What are tags...
• 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>
• Most HTML Tags work in pairs. (Does that make these dynamic duos ‘tag teams’?).
![Page 6: Designing Web Pages](https://reader036.fdocuments.net/reader036/viewer/2022062521/5681685e550346895dde9dbd/html5/thumbnails/6.jpg)
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.
![Page 7: Designing Web Pages](https://reader036.fdocuments.net/reader036/viewer/2022062521/5681685e550346895dde9dbd/html5/thumbnails/7.jpg)
<!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>
Example of a basic HTML document:
![Page 8: Designing Web Pages](https://reader036.fdocuments.net/reader036/viewer/2022062521/5681685e550346895dde9dbd/html5/thumbnails/8.jpg)
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>
![Page 9: Designing Web Pages](https://reader036.fdocuments.net/reader036/viewer/2022062521/5681685e550346895dde9dbd/html5/thumbnails/9.jpg)
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>
![Page 10: Designing Web Pages](https://reader036.fdocuments.net/reader036/viewer/2022062521/5681685e550346895dde9dbd/html5/thumbnails/10.jpg)
The Line Break...
• 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>
![Page 11: Designing Web Pages](https://reader036.fdocuments.net/reader036/viewer/2022062521/5681685e550346895dde9dbd/html5/thumbnails/11.jpg)
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
![Page 12: Designing Web Pages](https://reader036.fdocuments.net/reader036/viewer/2022062521/5681685e550346895dde9dbd/html5/thumbnails/12.jpg)
Creating Unordered ListsUnordered List: uses bullets
<ul>
<h4>Classes</h4>
<li> Computers </li>
<li> Multimedia</li>
<li> TV/Digital Production</li>
</ul>
Tags for List - <li></li>!
Classes• Computers• Video Gaming 2• English
![Page 13: Designing Web Pages](https://reader036.fdocuments.net/reader036/viewer/2022062521/5681685e550346895dde9dbd/html5/thumbnails/13.jpg)
Creating Ordered ListsOrdered List: numbered
<ol>
<h4>Classes</h4>
<li> Computers </li>
<li> Multimedia</li>
<li> TV/Digital Production</li>
</ol>
Tags for List - <li></li>!
Classes1. Computers2. Video Gaming23. English
![Page 14: Designing Web Pages](https://reader036.fdocuments.net/reader036/viewer/2022062521/5681685e550346895dde9dbd/html5/thumbnails/14.jpg)
Text Formatting Properties...
• 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>
![Page 15: Designing Web Pages](https://reader036.fdocuments.net/reader036/viewer/2022062521/5681685e550346895dde9dbd/html5/thumbnails/15.jpg)
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.
• A plain <hr> with no attributes will make the line the full width of the screen.
![Page 16: Designing Web Pages](https://reader036.fdocuments.net/reader036/viewer/2022062521/5681685e550346895dde9dbd/html5/thumbnails/16.jpg)
ALIGN Attributes...
• 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.
![Page 17: Designing Web Pages](https://reader036.fdocuments.net/reader036/viewer/2022062521/5681685e550346895dde9dbd/html5/thumbnails/17.jpg)
Links...(Hypertext Reference)
• 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.
![Page 18: Designing Web Pages](https://reader036.fdocuments.net/reader036/viewer/2022062521/5681685e550346895dde9dbd/html5/thumbnails/18.jpg)
E-Mail Links...
• 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.
![Page 19: Designing Web Pages](https://reader036.fdocuments.net/reader036/viewer/2022062521/5681685e550346895dde9dbd/html5/thumbnails/19.jpg)
Images...(Image Source)
• 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.
![Page 20: Designing Web Pages](https://reader036.fdocuments.net/reader036/viewer/2022062521/5681685e550346895dde9dbd/html5/thumbnails/20.jpg)
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>
![Page 21: Designing Web Pages](https://reader036.fdocuments.net/reader036/viewer/2022062521/5681685e550346895dde9dbd/html5/thumbnails/21.jpg)
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
![Page 22: Designing Web Pages](https://reader036.fdocuments.net/reader036/viewer/2022062521/5681685e550346895dde9dbd/html5/thumbnails/22.jpg)
TutorialsIntroGetting StartedBasicElementsAttributesHeadingParagraphsLinksImages