Class 01 Notes
HTML & CSS
Chapter 1: Structure
Tags
HTML is used as a skeleton for the information in the page. Elements are used to allows readers, search engines, and programmers better understand the layout and information given on a web page. These elements have tags which usually come in pairs, with one exception. Elements will always have an opening and closing tag unless the opening tag is also a self-closing tag. For example:
Opening and closing tag:
<a href="#Readings-&-Notes">Readings & Notes</a>
Self-closing tag:
<img src="images/Cordon-Bleu-Grad.jpeg" alt="drawing" width="300"/>
The characters in the brackets indicates the tag’s purpose.
Attributes
Attributes provide additional information about the contents of an element. Attributes are found inside the opening tag. As you can see above, attributes come in many ways.
The two propteries of an attribute are the name and value. The name indicates what kind of additional information will be provided and should be written in lower case. The value should be placed in quotations.
Chapter 8: Extra Markup
Extra markup examples:
DOCTYPE
There has been several different versions of HTML and all of them have had different standards for functioning. The use of the DOCTYPE declaration allows the webpage to function correctly by declaring that the webpage the browser is about to run, follows HTML5 standards.
Comments
A comment is used in HTML, and coding in general, to help understand the code that is in a specific section. People that have not written a section of code but need to quickly look at it in order to understand what is going on, will read the comments and decifer the code with it. A comment in HTML looks like this:
<!--An example comment for my notes on chapter 8!-->
ID and class attributes
ID attributes are used to modify or identify on tag specifically that you’d like to be different than other elements on your HTML page. Classes are used to modify a group of elements or more across your HTML page. Both are used by identifying the attribute type and then using its name in quotations.
Block and inline elements
Block elements are elements such as a paragraph, ordered or unorder list, and div tags. They all return a new line after the closing tag. Inline elements are elements such as the span tag which can be placed within a sentence.
Chapter 17: HTML5 Layout
In the older versions of HTML, there were less elements to use and you often had to use an ID or class to identify the purpose of a certain section. Nowadays they have added elements such as the article or nav tag in order to simplify organization.
Chapter 18: Process & Design
The most important thing to look at when beginning to develop a website is the target audience. When doing so, you must tailor your UI and the information on the site to that specific group of people. It is helpful to ask questions to the person who hired you. You can then build your site under those requirements.
How you structure your site will determine how clients, and visitors of this site, view the information presented. Great ways to look at your structure is to make a wireframe or site map. These are good visual tools in which you can design your webpage and have a good base on which to build upon.