1 / 22

Designing Web Pages

Designing Web Pages. Getting to know HTML. H yper T ext M arkup L anguage. HTML is the major language of the Internet’s World Wide Web. Web sites and pages are written in HTML. What is HTML?.

mandel
Télécharger la présentation

Designing Web Pages

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Designing Web Pages Getting to know HTML...

  2. 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?

  3. 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. Getting Started...

  4. 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. Using “index.html”

  5. 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 stopbold text. The tag with the slash (/) is known as the closing tag. • <b> This text is bold</b> What are tags...

  6. 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. Document Structure...

  7. 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 thetop of the browser window). </head> <body> (contains text, headings, links, graphics, sound etc.) Body goes here </body> </html>

  8. 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> Headings...

  9. 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 marvelousday.</h3> Today is a wonderful day.H4 <h4>Today is a wonderfulday.</h4> Today is a neat day. H5 <h5>Today is a neat day.</h5> Today is a fabulousday. H6 <h6>Today is a fabulous day.</h6> Sample Headings...

  10. 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...

  11. 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 Paragraphs...

  12. Unordered 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 Creating Unordered Lists

  13. Creating Ordered Lists Ordered List: numbered <ol> <h4>Classes</h4> <li> Computers </li> <li> Multimedia</li> <li> TV/Digital Production</li> </ol> Tags for List - <li></li>! Classes Computers Video Gaming2 English

  14. 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...

  15. 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...

  16. Setting alignment: • LEFT - <h1align=left>Left </h1> • CENTER • <h1align=center>Center </h1> • RIGHT • <h1align=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...

  17. 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)

  18. 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:jmacleod@murrieta.k12.ca.us”> Ms. Julie MacLeod</a>! • To insert your email, copy your address into your index.html page. E-Mail Links...

  19. 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)

  20. 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> The BODY Attributes...

  21. 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

  22. Tutorials Intro Getting Started Basic Elements Attributes Heading Paragraphs Links Images

More Related