HTML Introduction

In this workshop, I was introduced to the fundamentals of web design through HTML and CSS. Kyle introduced me to Brackets, which is a free application that can be downloaded on their website that allows developers to write code (not just HTML) and export it in live view in Google Chrome. Below is the IDE:

BracketsIDE

Using this IDE, Kyle taught us the fundamentals of HTML language and it’s structure; to begin, the document type of this file was to be HTML. Using the <!DOCTYPE html> tag the file was able to be recognised as a web page for popular web browsers such as Chrome, Safari or Internet Explorer.

I was then taught about the <head> tag and what it does; The <head> tag is a container for all the head elements; and it must include a title for the document, and can include scripts, styles, meta information, and more.

The <html> tag is where the developer(s) write their code within this tag. It is important that each tag and the code below is indented so the web browser can understand what parts belong where within the code.

Kyle then went on to explain that the <metatag provides metadata about the HTML document. He went on to explain that metadata does not display on the web page and the Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.

Within the <title> tag, Kyle explained that this element enables the web page to have a title that can be displayed at the top of the tab of a browser.

He then went on to explain the purpose of the <link> tag; using the <link> tag, the developer(s) are able to link other files to this HTML document; this can vary from CSS or Javascript files.

Once all of the <head> elements have been inserted into the HTML document it is very important that all of the tags within in this element are indented at their own level. Once the developer(s) have included all of the information needed within the <head> element then they are also required to close this element with a </head> tag.

After this is done, the developer(s) are required to open a new tag known as the <body> element. This element, as described by Kyle, is where all of the content of the web page goes. So this includes, text, images, links and so forth.

To insert text into the <body> of the web page the developers are required to insert a tag known as a <p>, this element allows the developer(s) to write paragraphs within the main body. Of course, with each <p> it must be indented and closed with a </p>.

The <h1>, <h2>, <h3> tags do the same functions as a <p> element, the only difference is that these are for headings of a web page, and of course must be closed like a <p> element with a </>.

Kyle also taught us how to insert an image into a web page. To begin he explained, that inserting an image must be written like this: <img src=”example.jpg” alt=”Mountain View” style=”width:304px;height:228px”>. The image source is where the image can be located on the computer, such as a directory. The ‘alt’ text is simply giving the image a name tag. Within the ‘style’ text the developer(s) are required to insert the dimensions of the image. When inserting the image and writing the dimensions it is important that the size of the image and the dimensions mentioned within the HTML should be the same, otherwise there will be distortion when the web page is displayed with the image.

Once all of the tags and elements have been finished with, the code should be closed with a </HTML> tag which simply closes the code of that file. What is easy to forget is that all of these tags mentioned above should be in pairs; so once one is opened then it must be closed with another, and indented within it’s own nest.

Overall, I found this workshop to be very helpful in understanding the basic fundaments to how a web page works within a browser. I hope in the future to experience more, in depth understandings into this fun subject with Kyle.

Advertisements