Scribd
Upload
43 views

W3 Notes

Uploaded by

imlearningrussian
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
43 views

W3 Notes

Uploaded by

imlearningrussian
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 16

INTRODUCTION

Hyper Text Markup Language ((.html)); the standard markup language for creating
Webpages

describes the structure of the page; series of elements; elements tell the browser
how to
display the content; HTML elements label pieces of content such as "this is a
heading, etc.

<!DOCTYPE html> declaration "this is an HTML5 document


<html root element of html page
<head> meta info about a given page
<title> specifies a title; browser's title bar or page's tab
<body> documents body; <h1-6> <p> <img> etc.

HTML element = ((<start-tag> CONTENT </end-tag>))


*some elements have no end tag=Empty/Void elements

>>>>Web Browsers = Read HTML documents and display them correctly;


A browser uses HTML tags to determine how to display the document.

The content inside the <body> section will be displayed in a browser.


The content inside the <title> element will be shown in the browser's title bar or
in the page's tab.

>>>>>HTML History<<<<<
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5 ************
2016 W3C Candidate Recommendation: HTML 5.1
2017 W3C Recommendation: HTML5.1 2nd Edition
2017 W3C Recommendation: HTML5.2

EDITORS///
~Learn Html~
Recipe:
- A simple text editor
BASIC///
ELEMENTS///
<br> line break
just use lowercase

ATTRIBUTES///
>>>>>The src Attribute<<<<<
1. Absolute URL = Link to another website
2. Relative URL = Link to image hosted within website. (something about domain)

>>>>>The style Attribute<<<<<


add styles to an element such as color font size and more

>>>>>The title Attribute<<<<


defines some extra information about an element
>>>>> <<<<<
HTML standard does not require (case-sensitive/ quote att. values/ )....Whatever
just use them

>>>>>Single or Double Quotes?<<<<<


<p title='John "ShotGun" Nelson'>
<p title="John 'ShotGun' Nelson">

HEADINGS///
Browsers automatically add a margin before and after heading
search engines use headings to index the structure and content of webpage
h1-h6 most-least important; only for headings not BIG and BOLD

<h1 style="font-size:###px;">...</h1>

PARAGRAPHS///
<hr> Horizontal Rule thematic break; seperate content (or define a change)

<pre>
Can type the
text how
you want
it
</pre> ((pre-formatted))
<tagname style="property((CSS)):value((CSS));">

"background-color" ((property)) background color of element


"color" ((property)) text color

TEXT FORMATTING///
<b> bold
<strong> important
<i> italic
<em> emphasized
<mark> marked
<small> smaller
<del> deleted
<ins> inserted
<sub> subscript
<sup> superscript

QUOTATION AND CITATION///


<blockquote> quoted another source
<q> short quotations
<abbr title=""> defines an abbreviation
<address> contact information for author/owner; usually italics
<cite> defines the title of a creative work; usually italic
<bdo dir="rtl"> "bi-directional override" just fucking say backwards fucking hell

<!--debugging; search for errors-->

COLORS///
<h1 style="border:2px solid (color);">Sup Nigga</h1>

>>>>>Color Values<<<<<
rgb >>> rgb(255,255,255)/ rgba (,.5)
hex >>> #af6789
hsl >>> (9, 100%, 64%)/ hsla (,.5)
...a for alpha channel (opacity)0.0-1.0
rgb(1:1:1)=gray Low#=Dark

CASCADING STYLE SHEETS///


-color
-font
-font size
-spacing between elements
-how elements are positioned and laid out
-what background images used
-what background colors are used
-display for different devices/screen sizes
-(much more)

cascading=a style applied to a parent element will also apply to


all children elements within the parent element.

>>>>>USING CSS<<<<<
--Inline = style attribute inside HTML elements
>apply a unique style to a single HTML element

--Internal = <style> in <head>


>nested in <head>;
<style> sets style for all certain elements
body {:;}
h1 {:;}
p {:;}
</style

--External = <link> to .css (most common)


<head>
<link ...>
</head>

>>>>>CSS BORDER<<<<<
p {
border: 2px solid powderblue;
}

LINKS///
>>>>>Hyperlinks<<<<<
Links allow users to click their way from page to page; HTML links are hyperlinks.
Link >>> Another Document
Link = any HTML element

>>>>>Syntax<<<<<
<a> defines a hyperlink
syntax >>> <a href="url">link text</a>

>>>>>The target Attribute<<<<<


<a target="_blank" = Opens the document in ... a new window or tab
="_self" = ...the same tab it was clicked
="_parent"=
="_top" =

>>>>>Absolute VS Relative URLS<<<<<


https://www
html_images.asp
/css/default.asp
>>>>>Image As Link<<<<<
<a>
<img>
</a>

>>>>>Link Email<<<<<
<a href="mailto:(email)">text</a>

>>>>>Button Link<<<<<

>>>>>Link Titles<<<<<
<a href="url" title="yada yada"> hara hara</a>
hara hara shows as link; hover over = "yada yada"

>>>>>More// Absolute/Relative URLs<<<<<


full URL = web page
href="/html/default.asp" = html folder
href="default.asp" = same folder as current page
-------------------------------------------------------

>>>>>Link Colors<<<<<
<style>
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}

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

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

a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

a:hover, a:active {
background-color: red;
}
</style>
-------------------------------------------------

Create Bookmarks
<element id="C4">Chapter 4</h2>
<a href="#C4">Jump To CHaper 4</a>

Link Bookmark Another Page


<a href="html_demo.html#C4">Jump To Chaper 4</a>

IMAGES///
<img src=".jpg" alt="yea">

>>>>>Width/Height<<<<<
<img src=... alt=... style="width:;height:;">
<img src=... alt=... width="" height="">

Always specify the width and height of an image.


If width and height are not specified, the web page
might flicker while the image loads.

>>>>>Image Another Folder<<<<<


<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
....src...=other folder
>>>>>Image Link<<<<<
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
>>>>>Image FLoat<<<<
<img style="float:(side);...">
---------------------------------------
>>>>>Image Map<<<<<
<map> defines an image map; the area of it is defined with <area> tags

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
>>>>>Shape<<<<<
rect eh ok
circle eh
poly what the fuck
default

>>>>>Image Map and Javascript<<<<<


<map name...>
<area shape.... coords... href... onclick="myFunction()"
</map>
<script>
function myFunction() {
alert("I used JavaScript to make this.");
}
</script>
...<picture> Defines a container for multiple images

>>>>>Background Image on HTML Element<<<<<


<element style="background-image: url('name.file');">

<style>
element {
background-image: url('name.file');
background-repeat: no-repeat; ((One image))
background-size: cover; ((cover entire element))
background-attachment: fixed ((cover entirely and keep proportions))
background-size: 100% 100%; ((stretch and always cover entire element))
}
</style>

>>>>>HTML Tables<<<<<
<table> table
<tr> row
<th> header
<td> cell
<caption> table caption
...???
mada<colgroup>
mada<col>
mada<thead>
mada<tbody>
mada<tfoot>

>>>>Table Border<<<<<
table, th, td {
border: 1px solid black;
}

>>>>>Collapsed Table Borders<<<<


table {
border-collapse: collapse;
}

>>>>>Invisible Border+Style<<<<<
th, td {
border-color: #nigga4
} ((invisible border plus style))

>>>>>Round Table Corners<<<<<


table,... {
border-radius: 10px; ((rounded corners))
}

((leave out (<table>(.css style)) = skip border around table

>>>>>Dotted Table Borders<<<<<


th, td {
border-style: (-);
-dotted
-dashed
-solid
-double
-groove
-ridge
-inset
-outset
-none
-hidden
}

>>>>>HTML Table Width<<<<<


<table style="width: %">

>>>>>HTML Table Column Width<<<<<


<th/td style="width: %">

>>>>>HTML Table Row Height<<<<<


<tr style="height: px"

>>>>>HTML Table Headers<<<<<


first <tr> as <th> = headers on top (horizontal)
first <th> of every <tr> = headers on side (vertical)

>>>>>Align Table Headers<<<<<


th {
text-align: left;
} ((table headers align to the left))

>>>>>Header Multiple Columns<<<<<


<th colspan="2">Name</th>
<tr rowspan...

>>>>>Table Caption<<<<<
<table style="width...">
<caption>Dead Nigas Of 2017</caption>
<tr>...
---------------------------

>>>>>HTML Table - Cell Padding<<<<<


th, td {
padding: 15px;
padding-(-):##px;
-bottom
-top
-left
-right
}

>>>>>HTML Table - Cell Spacing<<<<<


table {
border-spacing: ##px;
}

>>>>>HTML Table Colspan & Rowspan<<<<<


simple

>>>>>HTML Table Styling<<<<<


*Use CSS to make your tables look better

tr:nth-child(even) {
background-color: #nigg3r
}

td:nth-child(even), th:nth-child(even) {
background-color: #nigg3r;
}

>>>>>Combine Vertical And Horizontal Zebra Stripes<<<<<


*Use an rgba() for transparency
tr:nth-child(even) {
(>>>)background-color: rgba(nigga, nigga, nigga, 0.4);
}
(tr...,td...)

>>>>>Horizontal Dividers<<<<<
tr {
border-bottom: 1px solid #dog
}

>>>>>Hoverable Table<<<<<
tr:hover {background-color: #NigG3r;}

>>>>>HTML Table Colgroup<<<<<


<table>
<colgroup>((after <table> and <caption>))
<col span="2" style="background-color: yea;
</colgroup>
<tr>
...

width, visibility, background, border ((Legal CSS Properties))

STYLE MORE COLUMNS = More <col>

STYLE MIDDLE COLUMNS = <col span="#">

HIDE COLUMNS = <col span="#" style="visibility: collapse">


>>>>>HTML Lists<<<<<

<dl> = description list

<dl>
<dt>=term name</dt>
<dd>- defines each term</dd>
</dl>

>>>>>Choose List Item Marker<<<<<


<ul style="list-style-type:
-disc
-circle
-square
-none

>>>>>Nested HTML Lists<<<<

<ul>
<li>yea</li>
<li>yeah
<ul>
<li>yuh</li>
<li>yah</li>
</ul>
</li>
<li>yay</li>
</ul>

yaaah
----------------------------

>>>>>Ordered HTML List - The Type Attribute<<<<<


<ol type="1/A/a/I/i"> numbers letters roman-numerals
<ol start="25"> start from 25

>>>>>HTML Block And Inline Elements<<<<<


Block-Level Elements
-address -article -aside -blockquote -canvas -dd -div -dl -dt -fieldset
-figcaption -figure -footer -form -h1-6 -header -hr -li -main -nav
-noscript -ol -p -pre -section -table -tfoot -ul -video

Inline Elements
-a -abbr -acronym -b -bdo -big -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

*Inline cannot contain block-level


Aligning <div> elements side by side///

... {
float: ((positioning and formatting content//
Allow elements to float next to each other instead of on top))

<style>
.mycontainer {
width:100%;
overflow:auto;
}
.mycontainer div {
width:33%;
float:left;
}
</style>

INLINE BLOCK///
div {
width:30%
display: inline-block; ((change <div> display property from block to inline-block
} = no longer add a line break before and after and will
display side by side))

>>>>>HTML <div> Element<<<<<


takes up all width
used to group sections of a web page together.

div {
margin:auto;
} ((center the div))

FLEXBOX///
<style>
.mycontainer {
display: flex;
}
.mycontainer > div {
width:33%;
}
</style>

GRID CONTAINER///
<style>
.grid-container {
display: grid;
grid-template-columns: 33% 33% 33%;
}
</style>
HTML id Attribute///
must be unique to an element; unlike class=""

id="this"

<a href="#this">...</a>

or...

<a href="name.html#this">...</a>

also use by JS perform task for specific element

getElementById() ((access an element w/ specific id}}

HTML iFrames///
<iframe> ((specifies an inline frame))
;used to embed another document within the current html

target="" ((must refer to name=""; opens window in iframe))

HTML JavaScript ((JS))///


Makes html pages more dynamic and interactive
<script> ((define a client-side script (JavaScript)))
contains script statements or external script file "src"

common uses: image manipulation, form validation, dynaic changes of content


document.getElementById = most common method select <>

change styles
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";

document.getElementById("image").src = "picture.gif";

<noscript> ((alternate content for unsupportive browsers))


HTML File Paths///

<img src="picture.jpg"> ((picture.jpg in same folder as page))

<img src="images/picture.jpg> ((picture in images folder in current folder))


<imgsrc="/images/picture.jpg> ((picture in images folder at root of current web))

<img src="../picture.jpg"> ((picture is in folder one level up from current


folder))

file path = location of file in websites' folder structure


used when link to external files; webpages image stylesheet JS

>>>>>Absolute File Paths<<<<<


<img src="https://www.(...).com/images/picture.jpg" alt="Mountain">
>>>>>Relative File Paths<<<<<
<img src="/images/picture.jpg" alt="Mountain">
<img src="images/picture.jpg" alt=Mountain">
<img src="../images/picture.jpg" alt="Mountain">

>>>>>BEST PRACTICE<<<<<
Use relative paths so it's not bound to your current base URL.
localhost = works on your own computer, current public domain and future public
domains.

HTML - The <head> Element///


<head>
<title> important for SEO; page title is used by search engine algorithms to
decide
the order when listing pages in search results.
<style>
<meta> character set, page description, keywords, author of the document,
viewport settings

1. Define keywords for search engines:


<meta name="keywords" content="HTML, CSS, JavaScript">

2. Define the author of a page:


<meta name="author" content="John Doe">

3. Define a description of your web page:


<meta name="description" content="Free Web tutorials">

Refresh document every 30 seconds:


<meta http-equiv="refresh" content="30">

Setting the viewport to make your website look good on all devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Define the character set used:
<meta charset="UTF-8">
<link>
<script> ((JS))
<base> specifies the base URL/target for all relative URLs in a page.
(href=)/target
one per document

</head>

container for metadata (data about data)


HTML metadata = data about the HTML document; not displayed

HTML Layout Elements And Techniques///


Semantic Elements That Define Different Parts of a webpage:
<header>
<nav>
<section>
<article>
<aside>
<footer>
<details>
<summary>

Techniques<<<<<
CSS framework ((fast; W3.CSS / Bootstrap)

CSS float property ((easy))


float and clear properties
floating elements tied to document flow, may harm flexibility.

CSS flexbox
ensures that elements behave predictably when the page layout must
accomodate different screen sizes and different display devices

CSS grid
grid-based layout system; rows and columns.
easier to design web pages without having to use floats and positioning.

HTML RESPONSIVE WEB DESIGN///


creating web pages that look good on all devices

a responsive web design automatically adust for different screen sizes and view
ports.

RWD = .html and .css to auto resize, hide, shrink, or enlarge a website to make it
look good on all devices
>>>>>Responsive Images<<<<<
Images that scale nicely to fit any browser size.

Width Property: if width: 100%; image responsive (scale up and down)

Max-width property: if set: 100%; scale down if have to but never more than
original

<picture> define different images for different window sizes


<source srcset="flowers.jpg" media="(max-width: 100px)">
<img src="">
</picture>

>>>>Responsive Text Size<<<<<


text size set with a "vw" unit; viewport width
style="font-size:10vw" = 10% of viewport width

>>>>>Media Queries<<<<<
define completely different styles for different
browser sizes.

<!--A responsive web page should look good on large desktop screens and on small
mobile phones-->

>>>>>HTML Computer Code Elements<<<<<


<code> define a peice of computer code
<kbd> define keyboard input
<samp> define sample output from a computer program
<var> define a variable in programming/mathematical expression

>>>>HTML Semantic Elements<<<<<


<article> specifices independent, self-contained content
<aside> content aside from content (~~sidebar)

<details> defines additional details that the user can view or hide.

<figcaption> defines a caption for <figure>


<figure> specifies self-contained content like illustrations, diagrams, photos,
code listings, etc. <img>

<footer> authorship, copyright, contact, sitemap, back to top, related documents.


<head/er> introductory content / set of navigational links; h1-h6, logo/icon,
authorship info.
<main> specifiy main content document
<mark> marked/highlighted

<nav> defines set of navagational links.

<section> defines a section in a document; Chapters, Intro, News Items, Contact


Info.

<summary>visbile heading for <details>

<time> date/time

<article> >< <section>

You might also like