HTML Notes

Sorry! This place is under construction. While you're here, please check out my original website.

Bookmarks

• HTML Styles
• HTML Text Formatting
• HTML Quotation/Citation
• HTML Styles - CSS
• HTML Links
• HTML Links - Different Colors
• HTML Links - Create Bookmarks

HTML Styles

< tagname style="property:value;" >

• style="font-family: fontname;"
• style="font-size:300%;"
• style="text-align:center;"

Hey guys, did you know that in terms of male human and female Pokémon breeding, Vaporeon is the most compatible Pokémon for humans? Not only are they in the field egg group, which is mostly comprised of mammals...

HTML Text Formatting

• < b > - Bold text (should be used as a last resort)
• < i > - Italic text
• < em > - Emphasized text
• < mark > - Marked text (highlight in css)
• < small> - Smaller text
• < del > - Deleted text (strikeout in css)
• < ins > - Inserted text (used in tandem with < del >, adds underline to new word)
• < sub > - Subscript
• < sup > - Superscript

Hey guys, did you know that in terms of male human and female Pokémon breedin, Vaporeon no Pokemon is the most _{compatible Pokémon for humans}? Not only are they in the ^{field egg group, which is mostly comprised of mammals...}

HTML Quotation/Citation

• < blockquote cite="(link)" > - Indents the quote
• < q > - Adds quotation marks
• < abbr title="(fullnamehere)" > - Lets you view abbreviation meanings when hovering
• < address > - Makes text italic and adds a br before and after
• < cite > - For titles of creative works, not names, makes italic
• < bdo dir="rtl" > - Bi-Directional Override, overrides text direction

Hey guys, did you know that in terms of male human and female Pokémon breeding, VAP is the most compatible Pokémon for humans? Not only are they in the field egg group, which is mostly comprised of mammals...

HTML Styles - CSS

• Inline - Directly inside elements
• Internal - < style > elements in the < head > section
• External - < link > to CSS file in the < head > section (link rel="stylesheet" href="(link)">

• border: 2px solid powderblue;
• padding: 30px;
• margin: 50px;

Hey guys, did you know that in terms of male human and female Pokémon breeding, Vaporeon is the most compatible Pokémon for humans? Not only are they in the field egg group, which is mostly comprised of mammals...

HTML Links

• target="_self" - Opens in the same window/tab
• target="_blank" - Opens in a new window/tab
• target="_parent" - Opens in the parent frame (when iframes are being used)
• target="_top" - Opens in the topmost frame

• < a href="link" >< img src="img" >< /a > - To use an image as a link
• < a href="mailto:someone@example.com" >Link< /a > - To send an email with a link
• < a href="link" title="This is a link" >Link< /a >= Shows tooltip text when mouse hovers over link

HTML Links - Different Colors

Unvisited link, green and no underline

a:link { color: green; background-color: transparent; text-decoration: none; }

Visited link, pink and no underline

a:visited {color: pink; background-color: transparent; text-decoration: none; }

Hovered link, red and underlined

a:hover { color: red; background-color: transparent; text-decoration: underline; }

Active link, (when the link is clicked), yellow and underlined

a:active { color: yellow; background-color: transparent; text-decoration: underline; }

A rectangular, inline red button with white text in the middle.

a:link, a:visited { background-color: red; color: white; padding: 15px 25px; text-align: center; text-decoration: none; display: inline-block; }

The red button turns a darker shade when hovered and clicked (active).

a:hover, a:active { background-color: darkred; }

HTML Links - Create Bookmarks

• < h1 id="bookmarkid" > - First, add the id attribute to something.
• < a href="#bookmarkid" > - Then, add a link to the bookmark.
• < a href="index.html#bookmarkid" > - To add a link to a bookmark on a different page