Baixe HTML tutorial iniciação e outras Manuais, Projetos, Pesquisas em PDF para Web Design e Desenvolvimento, somente na Docsity!
1 | P a g e
HTML Tutorial
www.phptpoint.com
HTML Introduction
Before your begin:
HTML or Hypertext Markup Language, is the most widely used language on Web. Technically, HTML is not a programming language, but rather a markup language. This tutorial gives a complete understanding on HTML. Before you begin, it's important that you know Windows or Unix. A working knowledge of Windows or Unix makes it much easier to learn HTML. You should be familiar with: Basic word processing using any text editor. How to create directories and files. How to navigate through different directories. Basic understaning on internet browsing using a browser like Internet Explorer or Firefox etc.
Introducing HTML:
HTML stands for H yper t ext M arkup L anguage, and it is the most widely used language to write Web Pages. As its name suggests, HTML is a markup language. Hypertext refers to the way in which Web pages (HTML documents) are linked together. When you click a link in a Web page, you are using hypertext. Markup Language describes how HTML works. With a markup language, you simply "mark up" a text document with tags that tell a Web browser how to structure it to display. Originally, HTML was developed with the intent of defining the structure of documents like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers. All you need to do to use HTML is to learn what type of markup to use to get the results you want.
Creating HTML Document:
This is document title
This is a heading
Document description goes here.....
Creating an HTML document is easy. To begin coding HTML you need only two things: a simple- text editor and a web browser. Notepad is the most basic of simple-text editors and you will probably code a fair amount of HTML with it. Here are the simple steps to create a baisc HTML document: Open Notepad or another text editor. At the top of the page type . On the next line, indent five spaces and now add the opening header tag: . On the next line, indent ten spaces and type . Go to the next line, indent five spaces from the margin and insert the closing header tag: . Five spaces in from the margin on the next line, type. Now drop down another line and type the closing tag right below its mate: . Finally, go to the next line and type . In the File menu, choose Save As. In the Save as Type option box, choose All Files. Name the file template.htm. Click Save. You have basic HTML document now, to see some result put the following code in title and body tags. Now you have created one HTML page and you can use a Web Browser to open this HTML file to see the result. Hope you understood that Web Pages are nothing but they are simple HTML files with some content which can be rendered using Web Browsers. Here , ,...
,
etc. are called HTML tags. HTML tags are building blocks of an HTML document nd we will learn all the HTML tags in subsequent chapters.
NOTE: One HTML file can have extension as
.htm or
.html. So you can use either of them based on your comfort.
HTML Document Structure: An HTML document starts and ends with and >/html> tags. These tags tell the browser that the entire document is composed in HTML. Inside these two tags, the document is split into two sections: The ... elements, which contain information about the document such as title of the document, author of the document etc. Information inside this tag does not display outside. The ... elements, which contain the real content of the document that you see on your screen.
HTML Tags and Elements: HTML Basic tags
HTML Basic tags
Each element should contain a element indicating the title of the document, although it may also contain any combination of the following elements, in any order: The <base> tag is used to areate a "base" url for all links on the page. The <object> tag is designed to include images, JavaScript objects, Flash animations, MP3 files, QuickTime movies and other components of a page. The <link> tag is used to link to an external file, such as a style sheet or JavaScript file. The <style> tag is used to include CSS rules inside the document. The <script> tag is used to include JAVAScript or VBScript inside the document The <meta> tag includes information about the document such as keywords and a description, which are particularly helpful for search applications. Example: Following is the example of head tag. The <title> Element: You should specify a title for every page that you write inside the <title> element. This element is a child of the <head> element). It is used in several ways: It displays at the very top of a browser window. It is used as the default name for a bookmark in browsers such as IE and Netscape. Its is used by search engines that use its content to help index pages. Therefore it is important to use a title that really describes the content of your site. The <title> element should contain only the text for the title and it may not contain any other elements. Example: Here is the example of using title tag. The <body> Element:
This is a paragraph tag.
HTML Basic tags
This is a paragraph tag.
The element appears after the element and contains the part of the Web page that you actually see in the main browser window, which is sometimes referred to as body content. A element may contain anything from a couple of paragraphs under a heading to more complicated layouts containing forms and tables. Most of what you will be learning in this and the following five chapters will be written between the opening tag and closing tag.
Example:
Here is the example of using body tag.
Putting all together:
Now if we will put all these tags together, it will constitute a complete HTML document as follows: To Become more comfortable
HTML Meta Tags
HTML lets you specify metadata - information about a document rather than document content - in a variety of ways. The META element can be used to include name/value pairs describing properties of the HTML document, such as author, Expiry Date, a list of key words, author etc. The tag is an empty element and so does not have a closing tag, rather, tags carry information within attributes, so you need a forward slash character at the end of the element. Metadata provided by using meta tag is a very important part of the web. It can assist search engines in finding the best match when a user performs a search. Search engines will often look
Document Refreshing:
You can specify a duration after which your web page will keep refreshing. If you want your page keep refreshing after every 10 seconds then use the following syntax.
Page Redirection:
You can specify a page redirection using Meta Tag. Following is an example of redirecting current page to another page. You can specify a duration after which page will be redirected. If you don't provide a duration then page will be redirected immediately.
Setting Cookies:
You can use Meta Tag to store cookies on client side later information can be used by then Web Server to track a site visitor. If you do not include the expiration date and time, the cookie is considered a session cookie and will be deleted when the user exits the browser.
Setting Author Name:
You can set an author name in a web page using Meta Tag. See an example below: If you do not include the expiration date and time, the cookie is considered a session cookie and will be deleted when the user exits the browser.
HTML Attributes
This para explains what is HTML
This para explains what is Casecading Style Sheet
Attributes are another important part of HTML markup. An attribute is used to define the characteristics of an element and is placed inside the element's opening tag. All attributes are made up of two parts: a name and a value: The name is the property you want to set. For example, the element in the example carries an attribute whose name is face , which you can use to indicate which typeface you want the text to appear in. The value is what you want the value of the property to be. The first example was supposed to use the Arial typeface, so the value of the face attribute is Arial. The value of the attribute should be put in double quotation marks, and is separated from the name by the equals sign. You can see that a color for the text has been specified as well as the typeface in this element: Many HTML tags have a unique set of their own attributes. These will be discussed as each tag is introduced throughout the tutorial. Right now we want to focus on a set of generic attributes that can be used with just about every HTML Tag in existence.
Core Attributes:
The four core attributes that can be used on the majority of HTML elements (although not all) are: id title class style
The id Attribute:
The id attribute can be used to uniquely identify any element within a page ( or style sheet ). There are two primary reasons that you might want to use an id attribute on an element: If an element carries an id attribute as a unique identifier it is possible to identify just that element and its content. If you have two elements of the same name within a Web page (or style sheet), you can use the id attribute to distinguish between elements that have the same name. We will discuss style sheet in separate tutorial. For now, the id attribute could be used to distinguish between two paragraph elements, like so: Note that there are some special rules for the value of the id attribute, it must: Begin with a letter (A.Z or a.z) and can then be followed by any number of letters, digits (0.9), hyphens, underscores, colons, and periods. Remain unique within that document; no two attributes may have the same value within that HTML document.
The title Attribute:
10 | P a g e
rtl Right to left (for languages such as Hebrew or Arabic that are read right to left)
Display Directions
This is how IE 5 renders right-to-left directed text.
English Language Page
This page is using English Language
Example: When dir attribute is used within the tag, it determines how text will be presented within the entire document. When used within another tag, it controls the text's direction for just the content of that tag.
The lang Attribute:
The lang attribute allows you to indicate the main language used in a document, but this attribute was kept in HTML only for backwards compatibility with earlier versions of HTML. This attribute has been replaced by the xml:lang attribute in new XHTML documents. When included within the tag, the lang attribute specifies the language you've generally used within the document. When used within other tags, the lang attribute specifies the language you used within that tag's content. Ideally, the browser will use lang to better render the text for the user. The values of the lang attribute are ISO-639 standard two-character language codes.Check HTML Language Codes: ISO 639 for a complete list of language codes. Example:
The xml:lang Attribute:
The xml:lang attribute is the XHTML replacement for the lang attribute. The value of the xml:lang attribute should be an ISO-639 country code as mentioned in previous section.
Generic Attributes:
Here's a table of some other attributes that are readily usable with many of HTML's tags. Attribute Options Function
11 | P a g e
align right, left, center Horizontally aligns tags valign top, middle, bottom Vertically aligns tags within an HTML element. bgcolor numeric, hexidecimal, RGB values Places a background color behind an element backgroun d URL Places an background image behind an element id User Defined Names an element for use with Cascading Style Sheets. class User Defined Classifies an element for use with Cascading Style Sheets. width Numeric Value Specifies the width of tables, images, or table cells. height Numeric Value Specifies the height of tables, images, or table cells. title User Defined "Pop-up" title for your elements. We will see related examples as we will proceed to study other HTML tags. For a complete list of HTML Tags and related attributes please check reference to HTML Tags List.
HTML Formatting Tags
If you want people to read what you have written, then structuring your text well is even more important on the Web than when writing for print. People have trouble reading wide, long, paragraphs of text on Web sites unless they are broken up well. This section will teach you basic text formatting elements like heading elements and paragraph elements.
Whitespace and Flow:
Before you start to mark up your text, it is best to understand what HTML does when it comes across spaces and how browsers treat long sentences and paragraphs of text. You might think that if you put several consecutive spaces between two words, the spaces would appear between those words onscreen, but this is not the case; by default, only one space will be displayed. This is known as white space collapsing. So you need to use special HTML tags to create multiple spaces. Similarly, if you start a new line in your source document, or you have consecutive empty lines, these will be ignored and simply treated as one space. So you need to use special HTML tags to create more number of empty lines.
This is right aligned.
This is jutified. This works when you have multiple lines in your paragraph and you want to justfy a This is left aligned. This is center aligned. This is right aligned. This is jutified. This works when you have multiple lines in your paragraph and you want to justfy all the lines so
Hello
You come most carefully upon your hour.
Thanks
Mahnaz
Hello
You come most carefully upon your hour. Thanks
Mahnaz
This will produce following result: To Become more comfortable
Create Line Breaks - The
Element:
Whenever you use the
element, anything following it starts on the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them. Note: The
element has a space between the characters br and the forward slash. If you omit this space, older browsers will have trouble rendering the line break, while if you miss the forward slash character and just use
it is not valid XHTML Example: This will produce following result: To Become more comfortable
Centring Content - The Element:
You can use tag to put any content in the center of the page or any table cell. Example:
##
This is not in the center.
This is in the center.
This is not in the center. This is in the center. A good example of this technique appears in the movie "12 Angry Men."
A good example of this technique appears in the movie "12 Angry Men."
The morbid fear of the number 13, or triskaidekaphobia, has plagued some important
Example for soft hyphen - The morbid fear of the number 13, or triskaideka Example for soft hyphen - The morbid fear of the number 13, or triskaidekaphobia, has plagued some important histo This will produce following result:
Nonbreaking Spaces:
Suppose you were to use the phrase "12 Angry Men." Here you would not want a browser to split the "12" and "Angry" across two lines: In cases where you do not want the client browser to break text, you should use a nonbreaking space entity ( ) instead of a normal space. For example, when coding the "12 Angry Men" paragraph, you would use something similar to the following code:
Soft Hyphens:
Occasionally, you will want to allow a browser to hyphenate long words to better justify a paragraph. For example, consider the following code and its resulting output. In cases where you want a client browser to be able to hyphenate a word if necessary, use the soft hyphen entity () to specify where a word should be hyphenated. So above example should be written as follows: This will produce following result: NOTE: This may notwork with some web browsers.
The following word uses a bold typeface.
The following word uses a **bold** typeface.
The following word uses a italicized typeface.
The following word uses a italicized typeface.
The following word uses a underlined typeface.
The following word uses a underlined typeface.
Presentational Tags:
If you use a word processor, you are familiar with the ability to make text bold, italicized, or underlined; these are just three of the ten options available to indicate how text can appear in HTML and XHTML.
Bold Text - The Element:
Anything that appears in a ... element is displayed in bold, like the word bold here: This will produce following result: To Become more comfortable
Italic Text - The Element:
Anything that appears in a ... element is displayed in italicized, like the word italicized here: This will produce following result: To Become more comfortable
Underlined Text - The Element:
Anything that appears in a ... element is displayed with underline, like the word underlined here: This will produce following result: To Become more comfortable
Strike Text - The Element:
The following word uses a strikethrough typeface.
The following word uses a strikethrough typeface.
The following word uses a monospaced typeface.
The following word uses a monospaced typeface.
The following word uses a superscript typeface.
The following word uses a superscript typeface.
The following word uses a subscript typeface.
Anything that appears in a ... element is displayed with strikethrough, which is a thin line through the text: This will produce following result: To Become more comfortable -
Monospaced font - The Element:
The content of a element is written in monospaced font. Most fonts are known as variable- width fonts because different letters are of different widths (for example, the letter m is wider than the letter i). In a monospaced font, however, each letter is the same width. This will produce following result: To Become more comfortable
Superscript Text - The Element:
The content of a element is written in superscript; the font size used is the same size as the characters surrounding it but is displayed half a character.s height above the other characters. This will produce following result:
Subscript Text - The Element:
The content of a element is written in subscript; the font size used is the same as the characters surrounding it, but is displayed half a character.s height beneath the other characters.
Content Articles
Actual content goes here.....
Content Articles Actual content goes here.....
This is the example of span tag and the d This is the example of span tag and the div tag alongwith CSS
You must remember to close elements in XHTML.
This will produce following result: The element, on the other hand, can be used to group inline elements only. So, if you had a part of a sentence or paragraph you wanted to group together you could use the element. This will produce following result: These tags are commonly used with CSS to allow you to attach a style to a section of a page.
HTML Phrase Tags
While some of these phrase elements are displayed in a similar manner to the , , , and elements you have already seen, they are designed for specific purposes. For example, the and elements give text emphasis and strong emphasis respectively and there are several elements for marking up quotes. We will see all phrase tags in this section with examples.
Emphasized Text - The Element:
The content of an element is intended to be a point of emphasis in your document, and it is usually displayed in italicized text. The kind of emphasis intended is on words such as "must" in the following sentence: This will produce following result:
20 | P a g e
You must remember to close elements in XHTML.
You must remember to close elements in XHTML.
You **must** remember to close elements in XHTML.
I have a friend called Abhy.
I have a friend called Abhy.
This chapter covers marking up text in XHTML Element:
The element is intended to show strong emphasis for its content; stronger emphasis than the element. As with the element, the element should be used only when you want to add strong emphasis to part of a document. This will produce following result:
Text Abbreviation - The Element :
You can indicate when you are using an abbreviated form by placing the abbreviation between opening and closing tags. This will produce following result:
Using Acronym - The Element :
The element allows you to indicate that the text between an opening and closing element is an acronym. When possible use a title attribute whose value is the full version of the acronyms on the element, and if the acronym is in a different language, include an xml:lang attribute in XHTML documents. This will produce following result:
