There is always a less demanding option than writing the HTML code yourself. You can use a web page editor (Microsoft FrontPage, Dreamweaver etc.) to create a web page. All you need to do is to type the content, insert images or any other graphics and save the document as HTML file. The HTML code will be generated in the background by the software. This is a very easy option, however, the result you can achieve this way are limited. In order to create a professional looking, well designed and dynamic website you need to understand the HTML code very well.
Why you should know how to write HTML code:
– To design professional websites and maintain the code in an immaculate manner;
– To design dynamic websites which requires programmatically generated code;
– To design websites which include forms to send information.
In this part we are going to explore HTML code in more depth, syntax, basic page setup, tags and attributes as well as the basic rules.
HTML Guidelines
Despite a wide variety of coding styles used in website, it would be beneficial for you to follow some guidelines while building your website:
– Use lowercase for all your tags and attributes;
– Use quotes for values, all attribute values should be placed in between quotation marks;
– Maintain proper spacing – a single space between elements and their attributes and no space between a tag and the brackets;
– Nest correctly – while placing one HTML document inside of another and always close the most recently opened element before closing another.
HTML element structure:
<element name> Text/HTML element </element name>
As shown in the picture above element name appears in the opening tag <element name> and the closing tag </element name> within the angle brackets (preceded by a slash in a closing tag). Usually it is an abbreviation of a longer descriptive name. The browser reading HTML document knows that anything in the brackets is HTML code and should not be displayed in the browser window.
Elements define the semantic meaning of their content, sometimes very specific – ‘Image’, ‘Heading’ or ‘Order list’ or more general – ‘part of the text’, ‘section on the page’.
HTML Tags
Everything written between the brackets <> is recognized as Tag and is not displayed on the web page. The Tags added around the content are referred to as Markup.
Example:
<p>This is my first web page</p>
HTML Attributes
Attributes are the instructions that modify or clarify an element and they are placed after the opening tag. They usually contain two elements:
– An attribute name
– An attribute value
Example:
<a href=”your URL goes here”>Links name goes herek</a>
This is an example of HTML link, which is defined with the <a> tag, ‘href’ is the attribute used to specify the hypertext reference of the linked page and the link address is its value.
Basic Document Structure
HTML elements can form a hierarchic structure on the page – one element may contain other. Let’s have a look at the following example of HTML code which shows the basic elements to build your web page:
<html>
<head>
<title>My first web page</title>
</head>
<body>
The content of my first web page.
</body>
</html>
As you can see the page starts with <html> which tells the browser that everything within <html> is HTML code. We have two main sections within the <html >, namely <head> which defines the heading of the document and includes <title> shown on your web page, and <body> which is the key are of any HTML file, as it contains the actual content displayed on your web page.
