This is my center of knowledge for HTML! I'm learning this as I go, so hopefully as I learn more, it'll wind up being cleaner.
Elements, or tags, are the building blocks of HTML. They're contained using carats "< >". Some common ones for website building are <body>, <p> (paragraph), <h1-h6> for body headers; and <a> for links.
Elements can be nested. For example, the html tag contains the all of the information necessary for the document. The <body> tag, nested in the <html> tag, contains all of the text that would be visible in the document. The <p> tag contains a block of text, and... you get it.
Some elements can be without end tags, like <p> (paragraph) and <br> (line
breaks), but it's best to not rely on this! At least not at my current level of webdev knowledge. (I left
the end tag off of this one for shits and giggles)
Here's a link to a full list of HTML tags.
Attributes provide some additional information for elements to work off of. For example:
Sidenote: Anything can use a <title> tag to define what it is when you hover over it!
Here's a link to a full list of HTML attributes.
Headings are useful for headlining what a block of text can say, but they're also useful for search engines and TTS programs to parse information. There are six levels of headings:
Each heading has a default style, but you can redefine that information using the CSS font-style attribute.
Paragraphs are assined with with the p tag. They can also be used to format large blocks of text. here's some extra tags that I've learned:
Styles can be set using the style attribute. Styles use the following syntax:
<tagname style="property:value">Property and value are both CSS definitions. Here's a list of some common properties (they're pretty self-explanatory):
Formatting tags are used to uh, format. Here's some common ones:
Quotations, in an HTML sense, are a kind of formatting used for citing text.
Comments are used to add notes within the code of whatever site you build with HTML. You can make a comment by using <!--x-->. Comments can also be useful for debugging you code if need be.
Colors are an addtribute that you can add to just about any visual element by using CSS.
Some common properties are:
Colors can be assigned using common names, but they can also use RGBA(0-255, 0-255, 0-255, 0.1), HEX(#XXXXXX), or HSLA(0-360, y%, z%, 0-1).
CSS, which stands for Cascading Style Sheets, can be used to add styles to a webpage. The possibilities are basically endless, ranging from adding animation to specific elements, overlaying images into your backgrounds, getting you coffee... okay, maybe not coffee. But you get it.
CSS can be added to documents in three ways:
Here's some common CSS parameters:
You can link to external sheets in these ways:
Links are the foundation of the internet and the main mode of transportation from one page to another. This here? This is a hyperlink: overdingaling. Its syntax is <a href="link" target="_location">display_text</a>
Absolute links use the full URL, including the https:// bit. Local links, or relative URLS, do not include the https:// bit.
You can assign a link to an image by containing the image in a hyperlink element. For example:
You can link to an email address by using <a href="mailto:emailaddress@url.com">display text</a>.
Link colors, at default, are as follows but they can be changed using CSS:
Links can also be styled as buttons using CSS:
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
Link bookmarks allow you to jump to a specific section of a webpage by attaching an id to an element, then adding a link to a specific section (which is a fucking gamechanger for this page, let me tell you). Here's the syntax:
target: <element id="x">
link: <a href="x">display_text<a>
Images can improve the design of your website dramatically. You can insert them using the <img> tag with this syntax:
<img src="image_title.png" alt="description" title="title" style="width:xpx;height:ypx,float:left/right" OR width="x" height="y">
The <img> is empty by default, but uses the src attribute to point to a specific url or file. If the image can't be read, it'll display the information in the alt attribute (screen readers also use this info to read the text here).
You can either use the style attribute along with the width and height properties, or width and height attributes individually to resize an image. You can also have the image float in relation to a paragraph by using the float property.
Some common image formats are JPG, PNG, APNG, GIF, ICO, and SVG files.
Image maps are images with clickable sections. They're made using the <map> and <area> tags. Here's some syntax:
<img src="image.png" alt="image" usemap="#imgmap">
<area shape="shape" coords="w,x,y,z" alt="alt" href="link.com">
</map>
You add a map to an image using the usemap attribute, then add an area using an <area> tag. The shape attribute uses four different kinds of parameters:
A clickable area in an image map can also trigger a JavaScript function. I don't know jack shit about JavaScript right now, so this doesnt make much sense to me, but once I learn JS I'm sure I'll be able to make use of this. For now, I'm lifting this straight from w3schools:
<map name="workname">
<area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()">
</map>
<script>
function myFunction() {
alert("You clicked the coffee cup!");
}
</script>
You can add a background image to an element by using the style attribute and adding the background images property. Here's the syntax:
<element style="background-image url('img_loc.png');">
This can also be done in the <style> element in the <head> section:
<style>
p {
background-image: url('img_loc.png'); }
</style>
You can specify this for the page as a whole too! Just place it in the body section:
<body>
p {
background-image: url('img_loc.png'); }
</body>
NOTE! If the image isn't big enough to cover the whole section you've defined, it'll wrap until it reaches the end of the element. To turn this off, make sure you set the background-repeat property to no-repeat. Here's some other useful attributes and properties:
- background-size: sets the background image to cover the element.
- cover: setbackground-size to cover to cover an element. use in combination with background-attachement set to fixed to keep the image's original proportions.
- stretch: set background-size to 100% 100% to stretch the image to the bounds of an element.
- background-attachment: use property fixed to keep the image in its original proportions
The <picture> element gives devs more flexibiity with specifying image sources. A <picture> elemt contains more than one source element, which can refer to different images with the srcset attribute. With this, the browser can choose an image best based on the current view or device. Here's the syntax:
<picture>
<source media="(min-width: xpx)" srcset="img_x.jpg">
<source media="(min-width: ypx)" srcset="img_y.jpg">
<img src="img_src.jpg">
</picture>
Using the <picture> element will show the first image format that your browser will recognize in cases where there wouldn't be proper format support!
Titles are viewed from search engines, your favorites bar, and many other locations. Favicons are the lil icons you see on the left hand side of a tab next to the page title. They can add a bit more flair to your site! You can add both titles and favicons by using this syntax:
<!DOCTYPE html>
<html>
<head>
<title="my_website_title">
<link rel="icon" type="image/x-icon" href="image_loc/icon.ico">
<body>
<p>suck my fat nutz lol</p>
</body>
</html>
| <address> | <article> | <aside> | <blockquote> | <canvas> | <dd> | <div> | <dl> | <dt> | <fieldset> |
| <figcaption> | <figure> | <footer> | <form> | <h1>-<h6> | <header> | <hr> | <li> | <main> | <nav> |
| <noscript> | <ol> | <p> | <pre> | <section> | <table> | <tfoot> | <ul> | <video> |
Inline elements, however, do not start on a new line. They only take up as much width as necessary. Here's the full list of inline elements:
| <a> | <abbr> | <b> | <bdo> | <br> | <button> | <cite> | <code> | <dfn> | <em> | <i> |
| <img> | <input> | <kbd> | <label> | <map> | <object> | <output> | <q> | <samp> | <script> | <select> |
| <small> | <span> | <strong> | <sub> | <sup> | <textarea> | <time> | <tt> | <var> |
The <div> element is often used as container for other HTML documents. It has no required attributes, but style, class, and id are common. You can use CSS with <div> to style blocks of content! Here's some syntax:
The span element is an inline container that can mark up a part of a text or document. It has no required attributes, but style, class, and id are common. You can use CSS with <span> to style parts of text! Here's some syntax:
Tables allow developers to arrange data into columns and rows. You can add them to your page using these tags and parameters:
Here's some syntax:
<!DOCTYPE html>
<html>
<head>
<title="my_website_title">
<link rel="icon" type="image/x-icon" href="image_loc/icon.ico">
<body>
<table>
<tr>
<th>header_1</th>
<th>header_2</th>
<th>header_3</th>
</tr>
<tr>
<td>data_1</td>
<td>data_2</td>
<td>data_3</td>
</tr>
</table>
</body>
</html>
Tables are expandable by adding more rows with new tr tags or with more columns by adding more td lines.
Table headers (th) can be used in any direction by nesting them in various ways:
Vertical headers:
<table>
<tr>
<th>header</th>
<td>data</td>
<td>data</td>
</tr>
<tr>
<th>header</th>
<td>data</td>
<td>data</td>
</tr>
</table>
Headers for multiple columns:
<table>
<tr>
<th colspan="2">header_1</th>
<th>header_2</th>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</table>
You can add caption that functions as a heading for the entire table by nesting a <caption> tag under the <table> tag:
<table>
<caption:>overall_header<caption>
<tr>
<th>header_1</th>
<th>header_2</th>
<th>header_3</th>
</tr>
<tr>
<td>data_1</td>
<td>data_2</td>
<td>data_3</td>
</tr>
</table>
You can add formatting to tables using the border property on the table, th, and td elements. Here's some syntax:
table, th, td {
border: xpx border_type color;
border-collapse: seperate/collapse;
border-radius: xpx;
border-style: dotted/dashed/solid/double/groove/ridge/inset/outset/none/hidden;
}
Note: The table element affects the outermost border of the table. th and td affect table headers and cells respectively.
You can change the sizing of columns and rows of a table using style in the table, (changes the overall width of the document), th (changes the column width), or tr (changes the row height) elements.
You can align table headers by using this syntax in your CSS:
th {
text-align: left/right/center;
}
Cell padding is the space between the cell's edges and the cell's content:
|
th, td { padding: xpx; } |
OR |
th, td { padding-top: xpx; padding-bottom: xpx; padding-left: xpx; padding-right: xpx; } |
Cell spacing is the space between each cell:
table {
border-spacing: 30px;
}