HTML Knowledge Base

back

---

Chapter 1: HTML Basics

HTML stands for HyperText Markup Language. The language relies on tags and content within those tags. For example: the following line uses the h1 tag.
<h1> Hi there!<\h1>
This tag is used for creating headers on pages. Tags like this one have a beginning tag and an end tag (<h1>, <\h1> respectively). Some tags are self closing tags, meaning one should not use a close tag with these sort of tags. For example, <br> creates a new line on the page, and requires no closing tag. This makes sense, since a line break doesn't really have a beginning and end. The computer just does it. However, the computer needs to know when headers are finished, or really any tag which includes content or is modifying content (eg. center). We have to tell the computer when we're done.

The next piece to know about tags is that some of them have attributes. The header tags, for example, have the attribute allign, and can be utilized as follows:
<h1 align="center">Hello World!</h1>
This creates the header, "Hello World", and centers it on the page. Attributes are useful for adding customizations to elements, thereby aiding in creating a certain page style and format.
The examples here are quite limited; whereas the amount of tags and attributes needs to know in order to create an appealing site are quite numerous. Fortunately, there are useful resources on the web that make finding pertinen information much easier than trying to memorize it all. The following sites are quite handy for finding whatever one needs when coding a webpage. I'm liking devdocs a lot so far. I can find whatever I'm looking for by simply typing in the key term. Nice and fast. If all else fails, google has my back. Have to get that thrill of efficiency :)

w3schools
Mozilla Developer Network Docs
devdocs.io

Note: use <!--Comments go here--> for notes/comments in code

Useful Resources

Here's a gem of a site. You can see what webpages looked like years ago. Check out google in beta mode! Web Archives
Google Beta Version

More useful sites:
Keyboard Shortcuts in VS (my favorite is auto format: shift + alt + f)
Emmet documentation
Understanding Character Encoding

Side Note

Evidently, choosing which tag to use isn't as simple as one may think. When it comes to choosing the correct tag for text content, for example, don't assume that just because your tag does what you want, that it is actually accomplishing what you want. The tag i and the tag em both make their content italisized but em is actually what tells browsers that the information is stressed. There is a semantic difference. See i vs em. The tag strong vs the tag b is another example. Both make the text bold, but their semantics are different.

More Info

<ul> is used for unordered lists. In other words, bullet points. <ol>, similarly, is used for ordered lists. Then, for ul you use style="list-style-type:_____" and fill the blank with whatever attribute you'd like (circle,disc,or square). For ol you use type and or start. See Docoumentation (ol). Within the ul or ol, use <li> to create list elements (bullet points).

Example

• ul.1
1. ol.1
2. ol.2
3. ol.3
• ul.2
• ul.3

Chapter 2: Intermediate

Tables

• Table Structure
  <table>
  <tr>
  <td>cell info</td>
  <td>cell info</td>
  </tr>
  </table>
  

The tag table creates the table. The tag tr creates a table row. The tag td creates a table cell/column. This is where one puts content into their table. You can create as many rows and columns as you like. First useful attribute I've learned about for tables is cellpadding which puts however much space one wants between all the elements in the table.

Forms

We probably wouldn't get very far without forms, because forms allow us to take input from the user. And of course, the vast majority of websites do this, for text inputs that is.
Creating forms is quite simple. Just use the tag form. Haven't learned much about its attributes yet but for now we'll use the method attribute and set it to post.

Label: this tag puts text on our page which we can use to label form elements such as a text box.

Input: this tag can create an input space for the user, for text, or a click box, or other types of inputs. The type atrribute for this tag has many possibilities. See MDN
Example

Code

<form class="" method="post">
<label>Your Name </label> </td>
<input type="text" name="" value=""> </td>
<input type="submit">
</form>

For more information, see MDN

Chapter 3: CSS

Background Color

Background color for a page can be quite easily changed by inserting a line of code into the body tag.

style="background-color: #e5effe;"

For nice color choices, see Color Hunt
Also: MDN CSS/color_value

Styling all tags in a file with one go

Use the style tag to make modifications to all tags of your choice throughout your file. For example, you can change all the hr tags at once, or all the table tags at once. Just use the style tag to make the modifications you want to see for each instance of these elements.

Example:

<style>
hr {
height: 3px;
background-color: #000000;
border-style: none;
}
</style>

This changes any hr tags (that don't have these attributes specified) in your file to have these attribute specifications. No more rewriting the same code over and over again. All hr tags in this file will have these attributes. All you have to is write <hr> and your done! Good time saver!

Corollary

Implementing such changes across all pages of a site is the next step. And it's simple! One simply needs to create a css file where they will store these stylings. Then, in the header section of each page, one simply adds the folling line:

<link rel="stylesheet" href="css/styles.css">

As you can see I used a folder called css, and my css file was styles.css. Using this line in each page I have ensures that each page will implement the same stylings that I have chosen. This makes it much easier to make changes across the entire site. Quite nice!

CSS Syntax

Once inside the css document, the following syntax is used to modify whatever elements one would like.

selector { property: value; }

Selector: what tag do you want to modify?
property: what attribute do you want to modify from the tag?
value: how do you want to modify the attribute?

Pretty simple!

Finding the selector is probably going to be the easy part. But finding the right property that will change what you want--that might not be so easy sometimes. So, MDN here we come:

Properties

The class and id selectors

Want to use different settings on the same tag? For example, want your h1 to be blue sometimes but other times have it be red? It's quite simple! But, BE WARNED! The id selector can only be used once per page! The class selector, on the other hand, can be used to modify as many tags as you want! See examples below for how to set these up:

class example:
<h1 class="blueHeader">
id example:
<h1 id="blueHeader">

These lines make it so this h1 will follow the CSS stylings set up for the class blueHeader. Now all we have to do is add a little code to our style.css. Note the dot before the class label and the # before the id label. This is important!! See below:

class example:
.blueHeader { (DON'T FORGET THE DOT!!)
background-color: "blue";
}

id example:
#blueHeader { (DON'T FORGET THE #!!)
background-color: "blue";
}

We can do the same thing for a redHeader by repeating the process. Pretty handy! Note: the class and id selectors are more specific than tag selectors, meaning they have higher precedence.

Multple Class Selection

To apply multiple classes to a tag, simply add a space and another class name within the class selector. See below:

<h1 class="blueHeader bigFont">

NOTE: you cannot have multiple id selectors for a tag.

Psuedo Classes

Psuedo Classes are used when you want to affect an element when it's in a different state. Yes, elements have different states. For example, when a user hovers over an element with their mouse, this puts that element in a different state. Thus, html has a hover state. See example below for how to use:

In our style.css:
img:hover {
background-color: "orange";
}

This code will make it so whenever we hover over an img element, it will change its background color to orange.

Div element

The div element is useful for creating display blocks. One can divide the page into sections using these, so to speak. The default setting is take up the whole width of the page, but this can be edited.

Box model

One can look at html elements as boxes. Each of these boxes has certain properties that are useful to know and that one can change to create the design one desires. See below:



The blue section in the middle is the content. It has a height and width. Then there's the padding, border, and margin properties. Each of these properties has a top, bottom, left, and right value.

padding: space between content and the border of the container element (div, for example). Padding increases the size of the container element. This is because it expands the space around the content area. The content area is just the defualt size of the container.

border: space around container. This adds to the total size of the container. For example, if a container is 100px wide but has a 20px border, its total width will be 140px (20px border-left + 20px border-right).

margin: space between container and next level container. If the page itself is the next level container, then you get space between the outside of the page.

example:

div code

width:100px;
height:100px;
background-color: yellow;
display: flex;
justify-content:center;
border: 20px solid;
padding: 40px;
margin: 20px;

paragraph code


align-self:center;

Display

Four of the main values for display: block, inline, inline-block, none.

block: these elements go across the whole page horizontally. Thus, they block out other content from being on the same line. Examples include paragraph, div, headers, etc. Note that even though you can change these elements width, they still block out other elements from being on the same line. That is, unless you change their display property value.

inline: these elements can be placed on the same line as other inline elements. Examples include images, and span. Note: height and width are not respected, though padding and margin are.

inline-block: you can set the width and height of these elements and they be on the same line as other inline or inline-block elements.

none: the element will not be displayed and will not take up any space.

Example of block, inline, & inline-block: w3schools

CSS positioning

Three Default Rules:

1. Content effects box models. For example, a large font makes its content box larger. Note, this is different than its container. If a paragraph is in a div, for example, the size of the paragraph does not effect size of div. But the font size, and size of paragraph does effect the size of its own content box.

2. The order of the content comes from the order of the code. Plain and simple.

3. Children sit on top of their parents. If a paragraph is within a div, it sits on top of the div element. If a span is within a paragraph, it sits on (within) the paragraph.

Four Position Properties

1. Static: default html setting for all elements. Keep to default html flow

2. Relative: positions an element relative to default position using top, bottom, left, and right values/coordinates. Note left actually moves the element right, and vice versa. Top moves element down, bottom moves element up. NOTE: this doesn't effect the position of anything else on screen, as if the element was still in its original position.

3. Absolute: positions an element relative to its parent. The right value distances an element from the right ending side of its parent. The left its left. The top its top. The bottom its bottom. Essentially adds a margin to the parent element. NOTE: absolute positioning affects html flow. The element is no longer apart of the natural flow of the document. It's as if the element doesn't exist to the rest of the page.

4. Fixed: positions an element relative to the page, keeping its position the same regardless of scrolling. Useful for nav bar. Top, bottom, left right work the same as with absolute positioning.

Centering Elements

Use text-align: center within the parent class to center text elements within the parent element. I like this method the most for centering text. The other way is to use margin: 0 auto for the text element. This sets the margin for the top & bottom to 0, while setting the margins for left and right automatically, and such that the text is centered. Note: The problem with this is that it centers the text based on the width of text element rather than the text itself. Therefore, it's less accurate. You can use relative positioning, however, to help with this. You can also use the center tag to horizontally center any elements you wish. I think this is a pretty good method. You can also use vertical-align: center to center an element. I need to test this one more.

Font Resources:
cssfontstack.com
google fonts

Google fonts is nice because you can easily embed the fonts you want. They give you the code to add to index.html.

More useful positioning attributes:

float: value can either be set to left or right. Takes the next element and puts it on the same line. Useful for "floating" text next to an image.

clear: basically the opposite of float. value either set to left or right, but clear ensures that nothing is to the left or right of an element. Prevents text from being wrapped around images.

Button Creation Resource

button generator

Home