Scribd
Upload
26 views

HTML Notes: Use CTRL-F As An Index! Search For Terms Etc Always Start With

This document provides notes on HTML elements and concepts. It includes summaries of common HTML elements like headings, lists, images, and tables. It also lists some useful references sites for HTML definitions, color generators, and HTTP request methods. The document emphasizes best practices like adding comments, using proper spacing, and accessibility techniques for tables.

Uploaded by

t
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
26 views

HTML Notes: Use CTRL-F As An Index! Search For Terms Etc Always Start With

This document provides notes on HTML elements and concepts. It includes summaries of common HTML elements like headings, lists, images, and tables. It also lists some useful references sites for HTML definitions, color generators, and HTTP request methods. The document emphasizes best practices like adding comments, using proper spacing, and accessibility techniques for tables.

Uploaded by

t
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

HTML NOTES

Use ctrl-f as an index! Search for terms etc


Always start with <doctype [insert lang]>

Useful General Sites:


1. HTML Elements Reference (Definitions but not in my words so not as useful when
quickly finding definition) https://developer.mozilla.org/en-US/docs/Web/HTML/Element
2. Free Code Camp (American gov’t funded program)
3. Color code generator
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool
4. Colour scheme generator
https://www.quackit.com/css/color/tools/css_color_scheme_generator.cfm
5. HTTP Request Methods https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods
https://www.codecademy.com/articles/http-requests
6.

MAKE NOTES IN THE CODE


- <! -- insert note -- > (this will not appear in the browser)

ANCHOR TAGS
- The main use of anchor tags - <a></a> - is as hyperlinks. That basically means that
they take you somewhere. Hyperlinks require the href property, because it specifies a
location.
IMAGES (some CSS involved but it’s w/e)
- <br><img src="Image.filetype" alt="Image description" style="height:value;"></br>
(<br></br> = line break btw)
HEADERS
- There are six levels of headers
- Each one changes font, paragraph breaks, and white (blank) space
- All: H1, H2, H3, H4, H5, H6
- H1 being the largest = most important and H6 the least

LISTS
- <li> element is used to represent an item in a list. It must be contained in a parent
element: an ordered list (<ol> numbers) an unordered list (<ul> bullets), or a menu (
<menu> ). In menus and unordered lists, list items are usually displayed using bullet
points.
- Linking on same page (like wikipedia): Make sure anchor (<a>) is inside <li>
<h1>The Brown Bear</h1>
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#habitat">Habitat</a></li>
<li><a href="#media">Media</a></li>
</ul>

SPACING
- Two spaces is standard among professionals for spacing tab type parent relationships.
Like how reddit comments are set up
See what I’m doing here
I’m hilarious

TABLES
- Tables are split into 3 sections: Head, Body, and Footer
- Step by step table construction:
https://learn.shayhowe.com/html-css/organizing-data-with-tables/
- Table rows <tr> are the horizontal lines in the table
- Table data[/cells??] <td> are what make the boxes filled with the data in the table
- Table heading <th> creates titles for your tables so they’re not just unlabelled boxes lol
(cLaRiFy ThE mEaNiNg Of ThE dAtA)
- You don’t always have to add a blank heading before your header(s)
- Scope attribute is for labelling whether it’s a row or col (column)
- In older code, the table borders were labelled as border = [insert integer as thickness
of line] however we now use CSS. But it’s useful to know when reading other people’s
older code.
CSS Version:
table, td {
border: 1px solid black;
}

- Spanning columns colspan means the length of horizontally elongated table boxes is
measured using the normal table boxes as a unit (must be equal to or greater than 1)
- Basically it’s eating columns for dinner
- Average example is something like a holiday longer than 1 day in a calendar (Kwanzaa)!
👇 In code
Left -(same technique dif. variables)- Right👇 In browser

- Spanning rows rowspan means the length of vertically elongated table boxes is
measured using the normal table boxes as a unit (must be equal to or greater than 1).
- Basically it’s eating rows for dinner
- Average example is something like an event lasting for multiple hours during a day in a
calendar (Spa day)
- Remember just as there are column headers, there are also row headers!! Let’s say in a
calendar the days are the column headers (very top headers) and the times of day are
the row headers (on the very left)
- <tbody></tbody> help section off [sometimes large] tables.
- Enclose the table elements after your <! -- Row 1 -- > section (after </tr>)
- To enclose the headers, use <thead></thead> after <table>
- While these separations don’t change anything, it makes specifically stylizing different
sections like the headers easier in CSS
- The caption element is required for accessibility! Ask Sergey about it :)
- <tfoot></tfoot> is used to enclose the bottom of the table (totals etc)
- You can use CSS to style/customize tables (see CSS document)!

You might also like