About HTML/CSS

The History of HTML

HTML, which stands for HyperText Markup Language, is a markup language used to create webpages. Web browsers read the HTML files and turn them into visible webpages that people can view. The webpage you are viewing right now utilizes HTML! The birth of HTML started with physicist Tim Berners-Lee, its creator. When he created HTML, he was an independent contractor with CERN, the European Organization for Nuclear Research. Berners-Lee wanted to create a system that CERN researchers could use to use and share documents, and so in 1990, he wrote up the browser and server software for the first version of HTML. Throughout the years, HTML has seen many updates, all leading to the current version of the markup language, HTML5. HTML is a very important component to the creation of webpages, due to it being one of the three essential languages one needs to know in order to properly create webpages, alongside CSS and Javascript.

Tags in HTML

As mentioned before, HTML is a markup language. This means that the language utilizes tags to describe its content. HTML tags are words inside angle brackets that dictate how the content is viewed. These HTML tags are usually written in pairs, with the leading tag being called the start tag, and the ending tag being called the end tag. The start and end tags are almost the same, except for the fact that the end tag contains a forward slash in front of the word in the angle brackets. The content, which is whatever the creator wants the viewer to see, is placed inside the start and end tags. There is a large variety of HTML tags that can be used to customize the content of webpages, and some are provided in the following table.

Tags Uses Properties
<img> provides an image from the Internet url of image, description of image, dimensions of image, etc.
<body> gives webpage content font size, text color, etc.
<h1> gives a main heading font size, font style, text color, etc.
<p> gives a paragraph font size, font style, text color, etc.
<a> gives a link website link, font size, font style, etc.
<div> defines a section of content id, class, etc.

Attributes in HTML

Attributes in HTML are pieces of additional information that are put inside HTML tags. These attributes change the element's functionality, and provide a wider range of options for customization. An attribute can be added to an element by adding it to the start tag, and the attribute's properties can be altered by changing its value. All attributes come in the format of [name of attribute]="[value of attribute]". An example of an attribute is 'text-align="center"' This attribute would be placed in a tag that describes a piece of text on the website. The attribute's id, "text-align", describes how the text should be aligned, and the value, "center", centers the text in the webpage. Another example of an attribute is 'alt="[text]"'. This attribute would be placed inside an <img> tag, and gives a description of the image in words. Screen readers will use this description to "read" and image, which can be utilized by blind people. The value inside the quotes would be the description of the picture.

CSS

CSS stands for Cascading Style Sheets, and it is a style sheet language used to describe the look of a document written in a markup language, such as HTML. CSS is used to design the layout, style, and overall presentation of a webpage. CSS was created because when HTML was created, it was never designed to efficiently format tags. To solve this problem, W3C, the World Wide Web Consortium, released CSS in 1996 to specifically handling the formatting side of webpage creation. CSS rule sets consist of a selector and a declaration block. The selector selects the HTML element that is to be styles, and the declaration block contains one or multiple declarations that format the element selected by the selector. Each declaration contains a property and a value of the property, and those two are separated by a colon. Multiple declarations are separated by semicolons. All the declarations are surrounded by opened and closed curly braces. An example of a CSS rule set is "p {color:white; text-decoration:underline;}. This rule set indicates that all text <p> tags will be colored white and underlines.