How to Build a Website. What is HTML? How does it work? What are the tags up to? Is this going to take long? Do I have to be online all the time? Is there anything HTML cannot do? What is XHTML ?. What is HTML?.
How to Build a Website
What is HTML?
How does it work?
What are the tags up to?
Is this going to take long?
Do I have to be online all the time?
Is there anything HTML cannot do?
What is XHTML ?
HTML (HyperText Markup Language.) is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet. It is relatively easy to learn, with the basics being accessible to most people in one sitting; and quite powerful in what it allows you to create. It is constantly undergoing revision and evolution to meet the demands and requirements of the growing Internet audience under the direction of the » W3C, the organization charged with designing and maintaining the language.
HTML consists of a series of short codes typed into a text-file by the site author — these are the tags. The text is then saved as a html file, and viewed through a browser, like Internet Explorer or Netscape Navigator. This browser reads the file and translates the text into a visible form, hopefully rendering the page as the author had intended. Writing your own HTML entails using tags correctly to create your vision. You can use anything from a rudimentary text-editor to a powerful graphical editor to create HTML pages.
The tags are what separate normal text from HTML code. You might know them as the words between the <angle-brackets>. They allow all the cool stuff like images and tables and stuff, just by telling your browser what to render on the page. Different tags will perform different functions. The tags themselves don’t appear when you view your page through a browser, but their effects do. The simplest tags do nothing more than apply formatting to some text, like this:
<b>These words will be bold</b>, and these will not.
In the example above, the <b> tags were wrapped around some text, and their effect will be that the contained text will be bolded when viewed through an ordinary web browser.
Well, it depends on what you want from it. Knowing HTML will take only a few days of reading and learning the codes for what you want. You can have the basics down in an hour. Once you know the tags you can create HTML pages.
Not at all. You can code your entire website offline, storing it all on your own computer, and then just transfer all the files onto the web. Then whenever you have new content, you just add that to the existing online version of your site. It’s really quite simple.
Of course, but since making websites became more popular and needs increased many other supporting languages have been created to allow new stuff to happen, plus HTML is modified every few years to make way for improvements.
XHTML (Extensible Hypertext Markup Language) is a family of XML markup languages that mirror or extend versions of the widely used Hypertext Markup Language (HTML), the language in which web pages are written.
XHTML 1.0 became a World Wide Web Consortium (W3C) Recommendation on January 26, 2000. XHTML 1.1 became a W3C Recommendation on May 31, 2001. XHTML5 is undergoing development as of September 2009, as part of the HTML5 specification.
Marking Element with Tags
The core building block of XHTML is the tag, which marks each element in a document. The tags can be either two-sided or one-sided.
The general syntax for a two-sided tag is:
<p>Robert Service High School</p>
The general syntax for a one-sided tag is:
In general, a single whitespace character--including newlines--or a sequence of whitespace characters are treated as a single space and leading/trailing whitespace is eliminated. This is known as 'collapsing whitespace'.
Therefore the following two paragraphs are treated as if they were identical
<p> Now is the time for all
good birds to to fly the edge of
the world and take a look over
the edge </p>
<p> Now is the time for all good birds to to fly the edge of the world and take a look over the edge </p>
HTML headings are defined with the <h1> to <h6> tags.
<h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3>
HTML paragraphs are defined with the <p> tag.
<p>This is a paragraph</p><p>This is another paragraph</p>
HTML links are defined with the <a> tag.
<a href=“ http://webproject1.50webs.com/index.htm ">This is a link</a>
HTML images are defined with the <img> tag.
<img src="logo.jpg" alt="Chemistry Classes at Robert Service High School" />
HTML links are defined with the <a> tag. The link address is provided as an attribute:
<a href="http://multimediaportfolio.50webs.com/">This is a link</a>
The <hr /> tag is used to create an horizontal rule (line).
<p>This is a paragraph</p><hr /><p>This is a paragraph</p><hr /><p>This is a paragraph</p>
Comments can be inserted in the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed.
Comments are written like this:
<!-- This is a comment -->
Use the <br /> tag if you want a line break (a new line) without starting a new paragraph:
<p>This is<br />a para<br />graph with line breaks</p>
HTML uses tags like <b> and <i> for formatting output, like bold or italic text.
These HTML tags are called formatting tags.
Text Formatting Tags
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
The purpose of the style attribute is:
To provide a common way to style all HTML elements.
Styles was introduced with HTML 4, as the new and preferred way to style HTML elements. With HTML styles, styles can be added to HTML elements directly by using the style attribute, or indirectly in separate style sheets (CSS files).
HTML Style Examples
The style attribute defines a style for the <body> element.
<h2>Look: Colored Background!</h2>
Font Family, Color and Size
<p style="font-family:courier new; color:red; font-size:20px">
The style attribute defines a style for the <p> element.
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:courier new; color:red; font-size:20px;">A paragraph</p>
The style attribute defines a style for the <h1> element.
<h1 style="text-align:center">This is heading 1</h1>
<p>The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page.</p>
In web terms, a hyperlink is a reference (an address) to a resource on the web.
Hyperlinks can point to any resource on the web: an HTML page, an image, a sound file, a movie, etc.
An anchor is a term used to define a hyperlink destination inside a document.
The HTML anchor element <a>, is used to define both hyperlinks and anchors.
We will use the term HTML link when the <a> element points to a resource, and the term HTML anchor when the <a> elements defines an address inside a document.
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell.
A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
<table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>
If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show.
To display a table with borders, you will have to use the border attribute:
<table border="1"><tr><td>Row 1, cell 1</td><td>Row 1, cell 2</td></tr></table>
Headings in a table are defined with the <th> tag.
<table border="1"><tr><th>Heading</th><th>Another Heading</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>
Table cells with no content are not displayed very well in most browsers.
<table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td></td></tr></table>
HTML supports ordered, unordered and definition lists.
An unordered list is a list of items. The list items are marked with bullets (typically small black circles).
An unordered list starts with the <ul> tag.
Each list item starts with the <li> tag.
An ordered list is also a list of items. The list items are marked with numbers.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
A definition list is not a list of single items. It is a list of items (terms), with a description of each item (term).
A definition list starts with a <dl> tag (definition list).
Each term starts with a <dt> tag (definition term).
Each description starts with a <dd> tag (definition description).
<dl><dt>Coffee</dt><dd>Black hot drink</dd><dt>Milk</dt><dd>White cold drink</dd></dl>