HTML Information Packet



HTML and CSS Introduction

HTML tags: Text with special instructions known as tags are surrounded by brackets, < >, and HTML tags tell a browser how to organize and present text, images and other web page content. Many tags are written using an opening tag and a closing tag that surround content that appears on the page. When writing HTML tags, you can use upper or lower case letters.

Example:

Home

Destinations

Travel

. This HTML code creates a paragraph in your page:

Hello World!

Even though upper case tag names are legal, lower case is the conventional practice.

Tag Structure: Certain HTML tags identify different parts of the document. For example, the and tags surround the main body. The and tags surround references to the style sheets, accessory information and meta data that does not appear on the web page. The (used to add notes or comments such as the author, date and title within your HTML code. They do not appear on the web page.

Create an Ordered List

(List Items are Numbered)

- ), an tag, or a header image. Common content in headers includes site names, company names and logos and slogans. Navigation links, enclosed in a tag can also appear in page headers.

(Add a class to a header for CSS styling)

CSS: header.site{}

The Tag

The tag is a container for a set of two or more heading tags ( - ). The tag is typically used to group the title and subtitle of a page or article. For example:

My New Blog

Enjoy my ramblings!

Define Navigation

You can use the tag to define a set of important navigational links to other pages on your site. By applying CSS rules to a group of links, you can display them in different ways. For example, you can display them as a row of buttons beneath a page header or as a list in a column on the side of a page.

Home

Adventures

Blog

(Adding a class to the could be used for CSS styling)

CSS: nav.horizontal{}

Define an Aside

You can mark information on your page as relating to the main content with the tag. The tag is useful for defining quotes, glossary terms or sets of links related to an article. According to the HTML5 specification, information in an tag should be related to the main content of the page. However, the main content should also be understandable with the content removed.

Related Photos

Add a class to an tag for CSS styling)

CSS: aside.related{}

Define a Footer

A is a place to put copyright information, a contact address, links to terms of service and other small print items on a page. It typically goes at the end of your page before the closing tag.

Thank you for visiting!

Note: It is a common problem for a footer to wrap around the wrong area of a page when there are areas assigned to float. To fix this problem:

footer{

clear: both;

}

Introducing Multimedia

Do you want to add multimedia to your web pages? Adding video enables you to tell a story, feature a product and provide interactivity to your viewers. Some concepts can be presented more effectively using moving pictures rather than static words and photos. By embedding audio, you can add background music to your pages to add ambience.

HTML5 introduces two new tags, and , for embedding multimedia into web pages. You embed a file providing a src value along with the tag, similar to how you embed an image file with the tag. Attributes for the and tags enable you to show player controls, make clips repeat, preload content and provide alternative formats and sources of the media.

Insert a Video or Audio File

You can add a video file to your page to display a movie inside your page. You specify the location of the video file using the src attribute.

CSS: audio{

background-color: white;

display: block;

margin: 5px;

width: 400px; }

Publishing Your Web Pages

The final phase of creating a website is publishing your pages. When it comes to building websites, the term publishing refers to all the necessary steps you must take to make your HTML5 documents, images and other content available to others. This includes finding a service provider to host your pages and registering a domain name. The final stop is to transfer the files for your pages from your local computer to a web server at your service provider.

Web Hosts

To place your pages on the web, you need a web server – an internet connected computer specifically set up to store and manage web pages. The best place to start looking for a host is with your existing internet service provider. If it does not offer web hosting services, you can look for a web host on the internet. For example, Web Host Magazine & Buyers Guide () can help you compare offerings. When publishing your first website, technical support is often important, so you might consider paying extra for a host that has a good track record in that area.

Acquiring Your Own Domain Name

An internet domain name, such as , can give your website a personalized address that is easy for users to remember. You can register for a domain name through a domain name registrar of which there are hundreds. Your web host may also offer domain registration services, sometimes for a reduced fee because you are already a customer. Once you acquire a domain name, you can associate the name with your website by setting up domain name service, or DNS, with your web host. This enables you to use your custom domain name rather than the host’s in the web addresses for your pages. After you register a domain name, you can also use it for e-mail.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download