Note! The page has been updated according to the new updated lessons.
HTML is the base framework (content and structure) of a website. It is possible to create websites that are just HTML, but not just CSS or Javascript.
HTML -> Hypertext Markup Language.
Hypertext -> Text documents that can be linked together using hyperlinks.
Markup -> Items are designated to certain rules. Things are marked up to show different things. This is done through HTML tags.
The anatomy of an HTML element often may look as follows, with a starting tag, and an ending tag.
Some others are self terminating, so they are structured like so -> < element>
Tags make requests to a browser to display text in a way that was designated.
Documentation is another part of tags, and you are able to find out more about documentation at the following sites.
The headings here get smaller as the numbers get larger.
To get a better understanding of headings, we can use a table of contents as an example. The topmost heading, such as a title might be a (H1) and then subheadings such as sections could be(H2). The subheadings are related to the heading's topic.
Only have 1 H1 Element per page. This can be correlated to the page's topic.
Use the heading tags in order. Start with an H1, and H1's subtopics are H2. H2's subtopics are H3s... and so forth.
P tags are paragraph tags. Items inside are grouped into the same paragraph.
Screen readers can read the beginnings of each paragraph, indicated by the p tags.
Used to give some space. It is a self terminating/void element, and works all by itself.
Can be used when there is a paragraph that has space in between each line, but the whole work itself is still the same paragraph (IE a poem)
Do not use a BR element if you want two paragraphs. Just use two paragraph tags. This is for screen readers.
Horizontal Rules are created to draw horizontal lines onto the page. It is a self terminating/void element.
We are able to change the line size with the html attributes.
This tag centers the text between it on the page.
Used to emphasize the importance of text, these elements can be nested within other elements.
Images can be added to pages. Image elements are self-terminating, but do need to include img src. The src is a link to the source of the image, be it an online image or an image that is stored in the file structure.
Void element
If you wanted to direct someone to a certain page, you can add a link using an anchor tag.
By the way, the convention is that links are blue if they haven't been clicked on, and purple if they have been.
Attributes include...
If you wanted to add in a list to a website, you could use either an ordered or an unordered list.
By the way, you can nest lists, as in add a list into a list.
There are also some attributes that can be used on lists as well, such as an attribute to change the type of bullet or number that is used on the list.
Elements include...
Tables are formed using table rows and table data. To use a table, you must use tr to form a new row, and td to add a cell in the row. If you want more columns, you need more cells.
Tables means that our columns are structured together, and are aligned to the same space.
The main job of tables is to display data, but it can also be used to arrange elements on a website.
Sometimes we use table head and table body because we might want to isolate these specific parts of the code for different styling and functionality.
Example table
| TD in TH 1 | TD in TH 2 | |
|---|---|---|
| Row 1 Table data 1 | Row 1 Table data 2 | |
| Row 2 Table data 1 | Row 2 Table data 2 | Row 2 Table data 3 |
Tables also have a variety of attributes. However, many of them are deprecated, and tables should be styled using CSS instead.
These can be used to collect data from a user.
They need both HTML and functionality, which requires javascript.
You must identify all of the name attributes.
Example form
We can change the way that elements look by using an attribute which gives information to the browser to modify the element. It comes after the element and is separated by a space.
This can be used to document something in the html that will not appear on the final site. However, it still appears inside the html file if one were to read the source. Avoid putting sensitive information here.
This is the framework that all websites tend to have. It contains elements such as Doctype, HTML, HEAD, BODY, And the closing tags for the corresponding elements.
The important thing here is to indent code properly so that it matches up with their corresponding tags. This makes it easier to organize and visualize the code.
There are several shortcuts to generate the code. In VSCode, you can type !. In Sublime, you can use < html>.