cap-aiba
I continued going through the tutorials on HTML. I am trying to get some practice using the things that I learned from the tutorial, but it's been a little challenging. I also talked to Mr.McKenna about the new system that he is installing, but he is still working on it, so there seems to be nothing I can do with it for now. Here is the updated notes from the tutorial and my practices.
HTML NOTES
<a> link
href= link destination
<img> image
<map> image-map, image with clickable areas (comes with coordinates to indicate where you want to be clickable)
<area> a clickable area inside an imaga map
<picture> a container for multiple image sources
src="____________" source (for images; make sure to add alt="__________")
width="___"
height="___"
<p> paragraph
<button> button
<ul> unordered list (bullet points)
<ol> ordered list (with numbers)
<br> break empty line NO </br>
style="______" color, font, size (include in <p>)
font-size:__px; or font-size:_____%;
color:_______;
background-color:_________;
border:_px solid COLOR NAME;
COLOR OPTIONS (Tomato, orange, dodgerblue, MediumSeaGreen, gray, slateBlue, violet, lightgray)
font-family:__________;
text-align:_____; (ex. center
COLOR INDICATION
rgb (red, green, blue)→(0,0,0)=black (255,255,255)=white
rgba(red, green, blue, alpha)
rrggbb(red, green, blue) →00=lowest value, ff=highest value
hsl value (hue, saturation, lightness)
hsla value (hue, saturation, lightness, alpha)
lang="___" language
title="____" (include in <p>, if you hover over the text, the value for title will be displayed)
<hr> horizontal rule, horizontal line across the page
<meta> meta data=information about HTML document, it is not displayed, includes document title, character set, styles, scripts(<head> element contains metadata
<q> quotation ("______")
<pre> preformatted text (with spaces)
<b> bold
<strong> important text
<i> Italix text
<em> emhasized text
<mark> marked text (highlighted)
<small> small text
<del> deleted text (line across teh text)
<ins> inserted text (underlined)
<sub> subscript
<sup> supscript
<blockquote cite="______LINK______">
<!-- →
CSS(cascading style sheets) (inline, internal, external)
(identify where) {
____________: _px COLOR;
____________: ___px;
}
padding(size of the border box)
margin(how far each texts are spread apart)
(making an exception) #p or p.ANYNAME works
LINK
<p><a href="___"> TEXT </a></p>
<h1 id="__"> TEXT </h1>
BACKGROUND (under STYLE)
background-image: url('____________');
background-repeat: ______________;
Background-attachment: __________;
background-size: ______;
TABLES
tr= row
th= header
td=data
<caption> (always after <table>)
border: _px COLOR → comes out as double line,
border-collapse: collapse; → single line border
padding: cell size
text-align: _____;
colspan= merging cells for COLOUMS
rowspan= merging cells for ROWS=
id="____" (ex.t01)→ gives the table a name: to add style later, refer it to as #t01 { AND ADD SPECIAL STYLES}
nth-child(odd/even) → for patterns
<table style="width:___">
<tr>
<th>______</th>
<th>______</th>
<th>______</th>
</tr>
<tr>
<td_______</td>
<td_______</td>
<td_______</td>
</tr>
LIST
<ul> list
<ol> ordered(/numbered) list
type="__"
1 numbered with numbers
A order with uppercase letters
a oder with lowercase letters
I order with upper roman numbers
i order with lowercase roman numbers
<li> each list item in a list
style=
list-style-type:______; (disc, circle, square, none)
start="__"
<dl>description list
<dt>the term
<dd>each item on the list
<div> container for other HTML elements (example: <div style="background-color:black;color:white;padding:20px;">)
<span> container for some text
<iframe> inline frame
INPUT FORM
<form></form>
<input type="text">
<input type="radio">
<input type="submit">
Comments