Lessons 2.1 to 2.10 - HTML (CodeHS.com)
Color Channel Value Range
0 to 255 rgb(0,0,0) is Black rgb(255, 255, 255) is White 256 to the 3rd = 16,777,216 possible colors (16+ million)
Style Attribute Code
<tagname style="property:value;">
#FF0000
#rrggbb red amount, green amount , blue amount
Decimal Numbering System
10 digits 0 1 2 3 4 5 6 7 8 9
Hexadecimal Numbering System
16 digits 0 1 2 3 4 5 6 7 8 9 A B C D E F range 00 to FF 00 = 0 FF = 255
Basic HTML Page format
<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html>
Close Tag
</tag>
Angle Brackets
<> The characters, < and >, set HTML tags off from the rest of the text on an HTML page. These two symbols enclose all HTML tags.
Structure of a link
<a href="https://bitly.com"> click me </a>
Hello World! code
<h1>Hello World!</h1> this is a sample of markup text
Structure of an image
<img src="http://folder/pict.jpg"> There is not a closing tag
Style Properties Sample
<p> is a paragraph <p style="color:blue;"> Results: a paragraph that is blue in color.
Border Attribute for a Table
<table border="1"> default is zero (0) is "no border" measured in pixels 1 thin... 5 thicker
Open Tag
<tag>
RGB Value
The relative amounts (intensity) of red, green, and blue light emitted from a light source such as a computer screen. rgb(0,255,0)
tree structure
A style of depiction often used to indicate hierarchal relationships
Copyright Licenses
All rights reserved Some rights reserved Public Domain
Table
An arrangement of data made up of horizontal rows and vertical columns or a GRID. The entire grid is called the table. <table>container for all table data</table>
<b>
Bold text This is <b>bold text</b>
table data
Data (names, numbers, year, etc.) displayed in a grid <td> single table data </td>
Table Header
First Table Row contains Table Headers. A Table Header describe what is in the column. <th> a single header </th>
<hr>
Horizontal Rule does not have a closing tag and creates a horizontal line on the screen
HTML
Hypertext Markup Language
HTTP
Hypertext Transfer Protocol
HTTPS
Hypertext Transfer Protocol Secure
<i>
Italicized text This is <i>important!</i>
cite your sources
Name of author Name of work Year of work Name of cite you sources Direct link to cite <cite>title and info</cite>
Hexadecimal
The hexadecimal number system is base 16, using only digits 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F. #FF00FF
Creative Commons
Public Domain Images Resource
Google Image Search Filters
Public Domain Images Resource
HTML attributes
Tags can have attributes that tell us more information about the tag. <a href="http://bitly.com">
Nesting Tags
The action of placing tags inside of tags. This is <i><b>cool!</b></i>
Domain name (URL)
The name of a site & the main part of the address e.g. Nike.com
Table Row
a horizontal row on grid <tr> a single row </tr>
text-align tag
left center right
<p>
paragraph of text <p>paragraph</p>
Hyperlink (or link)
point to another hypertext document
whitespace in a HTML document
results in a single space on the web page.
Multiple Property Styles
separate by semicolons <p style="color:blue; font-size:60px;"> Blue and 60 pixel font in paragraph
<ul> tag
unordered list <ul> List goes here </ul>
Unordered List
A bulleted list. Uses the <ul> element and also requires a closing tag </ul>
<li> tag
A list item (used for ordered and unordered lists) <ul> <li>apple</li> <li>bananas</li> </ul>
Order List
A numbered or letter list. <ol> requires closing tag </ol> 1. 2. 3. or a. b. c.
Style Attribute
Allows adding several different types of styles to HTML elements.
HyperLinks
Clickable connections that link text or images to other pages of the website, out to external websites, or to files posted on a website
HTML Color Codes
Color Name RGB Value Hexadecimal (hex)
some rights reserved
Creative Commons, creator may allow for things like reuse or modification as long as the creator is cited
Public Domain
Creative work that's not copyrighted and therefore free for you to use whenever you want.
indenting
Good way to organize code so sections are recognizable
Cell
Intersection of a row and a column in a table. One space/square on a grid.
src
It is an attribute. Specifies where to get the image from. It is the URL for an image.
<br>
Line Break does not have a closing tag and creates a new line/blank line
Nesting Lists
Lists inside of other lists. Indent shows the nesting structure.
Lists should be arranged:
Most important less important least important
Lists are good for:
Organizing inforamtion Simple Structure Easy to read and write
PublicDomainPictures.net
Public Domain Images Resource
pixabay.com
Public Domain Images Resource
color tag
Red Blue Yellow and more... 140 colors have names have names in HTML
<h1>
Tags start and end with angle brackets. The name of the tag goes in between the brackets. This is the Heading 1 tag.
HyperText
Text displayed on a computer that has links to other hypertext documents (hyperlinks)
<img> tag
The <img> tag allows us to add images to our web pages.
path
The path in a URL typically specifies a resource's exact location on the server.
Code Editor
The place where you add the programming instructions to a website.
color wheel
a circle with different colored sectors used to show the relationship between colors.
markup language
a language that lets you annotate text to define how it should be displayed
line break
a new line after a paragraph tag (acts like a return)
children
a root sprouts in to two different areas, these are called children, in our example, the children are HEAD and BODY
<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5>
as the number in the heading tag gets bigger, the heading gets smaller
#000000 represents the color
black
Style Property tags to manipulate
color background-color font-size text-align
<head>
contains important information about the document: metadata
<ol> tag
creates an ordered list <ul> List goes here </ul>
Metadata
data that describes other data
metadata
data that describes other data
<title>
defines the title of the webpage and displays in the tab on the web browser.
values
go inside double quotes name = "value" href = "http://bitly.com"
Attributes
have a name (href) and a value, it equals something (http://bitly.com)
href
hypertext or tags reference
Copyright
is a form of protection for intellectual property, usually applying to artistic works. Any work of original thought is the legal property of the creator and is protected by copyright law.
<body>
is where actual content of the document goes (text, images)
all rights reserved
standard copyright, creator reserves all rights
HTML Tag
tags markup the text of a document in order to tell the browser how the text should be displayed
HTML Formatting
tags used for formatting text on your web page
<a>
the <a> tag allows us to define a hyperlink in HTML It is part of an HTML attribute
font-size tag
the height of characters in pixels 12px 30px 60px
root
the top of the tree structure, in our example, the root is HTML
Plagerism
the use of another's original words or ideas as though they were your own
<!DOCTYPE>
used to tell the browser which HTML or XHTML version and type the document uses It is a comment <!---->
#FFFFFF represents what color?
white
width tag and height tag
width="100px" height="100px" Size of the image is specified in pixels
