Starting with HTML
Posted on | February 24, 2010 | 1 Comment
Interesting links:
www.w3.org/People/Berners-Lee/
http://www.w3.org
HTML (Hyper Text Markup Language)
XHTML (Extensible HyperText Markup Language)
CSS (Cascading Style Sheet)
HTTP (Hypertext Transfer Protocol)
URL (Uniform Resource Locator)
Domain Name: A name that identifies a computer or computers on the internet. These names appear as a component of a Web site’s URL, e.g. wikipedia.org. This type of domain name is also called a hostname.
A hyperlink, is a reference or navigation element in a document to another section of the same document or to another document that may be on a (different) website.
In 1989 Tim Berners Lee invented the World Wide Web, an internet-based hypermedia initiative for global information sharing while at CERN, the European Particle Physics Laboratory. He wrote the first web client and server in 1990. His specifications of URIs, HTTP and HTML were refined as Web technology spread.
Web Browsers
HTML learning:
the following sites have some excellent resources for learning HTML and other web programming
http://www.blooberry.com/indexdot/html/tagindex/all.htm
Writing your First HTML / XHTML page
HTML files are essentially text files, so can be created in any basic text editor (such as TextEdit on mac or Notepad on Windows)
If you want something a little more powerfull, then give these a whirl:
Smultron (os x)
Notepad ++ (Windows)
You can easily edit HTML files using a WYSIWYG (what you see is what you get) editor instead of writing your markup tags in a plain text file.
http://www.adobe.com/products/dreamweaver/
http://www.seamonkey-project.org/
http://www.fishbeam.com/en/goldfish/
http://www.kompozer.net/
http://www.xstandard.com/
RapidWeaver
http://www.realmacsoftware.com/rapidweaver/index.php
Coda
http://www.panic.com/coda/ (this is my favourite one)
(If you are using OSX, open TextEdit and change the following preferences: Open the “Format” menu and select “Plain text” instead of “Rich text”. Then open the “Preferences” window under the “Text Edit” menu and select “Ignore rich text commands in HTML files”).
Type in the following text:
<html>
<head>
<title>Title of page</title>
</head>
<body>
Hello World! This is my first homepage. <b>This text is bold</b>
</body>
</html>
Save the file as “index.html”. It is important to save this in a suitable folder specifically for your website. When creating website YOU NEED TO BE ORGANISED! so it’s good to start as you mean to go on and keep things in order right from the very begining.
Start your Internet browser. Select “Open” (or “Open Page / Open File”) in the File menu of your browser. A dialog box will appear. Select “Browse” (or “Choose File”) and locate the HTML file you just created – “index.html” – select it and click “Open”. Now you should see an address in the dialog box, for example ” file://localhost/Users/Sites/mypage.html”. Click OK, and the browser will display the page.
Example Explained
The first tag in your HTML document is <html>. This tag tells your browser that this is the start of an HTML document. The last tag in your document is </html>. This tag tells your browser that this is the end of the HTML document.
The text between the <head> tag and the </head> tag is header information. Header information is not displayed in the browser window.
The text between the <title> tags is the title of your document. The title is displayed in your browser’s caption.
The text between the <body> tags is the text that will be displayed in your browser.
The text between the <b> and </b> tags will be displayed in a bold font.
HTML TAGS
* HTML tags are used to mark-up HTMLÂ elements
* HTML tags are surrounded by the two characters < and >
* The surrounding characters are called angle brackets
* HTML tags normally come in pairs like <b> and </b>
* The first tag in a pair is the start tag, the second tag is the end tag
* The text between the start and end tags is the element content
HTML Elements
This is an HTML element:
<b>This text is bold</b>
The HTML element starts with a start tag: <b>
The content of the HTML element is: This text is bold
The HTML element ends with an end tag: </b>
The purpose of the <b> tag is to define an HTML element that should be displayed as bold.
This is also an HTML element:
<body>
Hello World! This is my first homepage. <b>This text is bold</b>
</body>
This HTML element starts with the start tag <body>, and ends with the end tag </body>.
The purpose of the <body> tag is to define the HTML element that contains the body of the HTML document.
Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
HTML automatically adds an extra blank line before and after a heading.
Paragraphs
Paragraphs are defined with the <p> tag.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML automatically adds an extra blank line before and after a paragraph.
Don’t Forget the Closing Tag
Closing all HTML elements with an end tag is a future proof way of writing HTML. It also makes the code easier to understand (read and browse) when you to mark both where an element starts and where it ends
Line Breaks
The <br> tag is used when you want to break a line, but don’t want to start a new paragraph. The <br> tag forces a line break wherever you place it.
<p>This <br> is a para<br>graph with line breaks</p>
The <br> tag is an empty tag. It has no end tag like </br>, since a closing tag doesn’t make any sense as it is self contained.
<br> or <br />
More and more often you will see the <br> tag written like this: <br />
Because the <br> tag has no end tag (or closing tag), it breaks one of the rules for future HTML (the XML based XHTML), namely that all elements must be closed.
Writing it like <br /> is a future proof way of closing (or ending) the tag inside the opening tag, accepted by both HTML and XML.
Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.
<!– This is a comment –>
Note that you need an exclamation point after the opening bracket, but not before the closing bracket.
Creating Hyperlinks
HTML uses the <a> (anchor) tag to create a link to another document.
An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.
The syntax of creating an anchor:
<a href=”url”>Text to be displayed</a>
The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.
This anchor defines a link to google:
<a href=”http://www.google.com/”>Search on Google!</a>
Unordered Lists
An unordered list is a list of items. The list items are marked with bullets (typically small black circles).
Unordered lists are a comon way to create navigation menus in conjunction with CSS, so they are more important and intergral to web design than you might first think
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
Here is how it looks in a browser:
* Coffee
* Milk
Ordered Lists
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.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
Here is how it looks in a browser:
1. Coffee
2. Milk
The Image Tag and the Src Attribute
In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only and it has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for “source”. The value of the src attribute is the location of the image on your computer or the URL of the image you want to display on your page.
The syntax of defining an image:
<img src=”images/boat.gif” />
The browser puts the image where the image tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.
The Alt Attribute
The alt attribute is used to define an “alternate text” for an image. The value of the alt attribute is an author-defined text:
<img src=”boat.gif” alt=”Big Boat” />
The “alt” attribute tells the reader what he or she is missing on a page if the browser can’t load images. The browser will then display the alternate text instead of the image. It is a good practice to include the “alt” attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers.
Comments
One Response to “Starting with HTML”
Leave a Reply
February 26th, 2010 @ 1:10 pm
[...] off, create a new file in your html editor of choice (see this post for more information on that) and call it style.css You could call it anything you want really, but it must have a .css file [...]