Introduction To HTML

INTRODUCTION TO HTML
HTML (HyperText Markup Language)
HyperText
- Provides access to other text via links aka hyperlinks.
Markup Language
- Computer language that defines the structure and presentation of raw text.
Hence in HTML, computer can interpret raw text that is wrapped in HTML elements.
HTML Anatomy
- Composed of elements.
- HTML paragraph element: <p>(opening tag) Hello World!(content) </p>(closing tag)
HTML Structure
- When an element is contained inside another element (by 2 spaces of indentation), it is the child
of that element; the child element is nested inside of parent element:
<body>
<div>
<h1>Example</h1>
</div>
</body>
- Heading element – 6 different types from <h1> to <h6>.

- Division element – A container that divides the page into sections/blocks, sections - grouping of
elements in HTML:
<div>s contain any text or other HTML elements: links, images, videos.
- Attributes – Contents can be added to opening tag of an element: id attribute to specify
different content and when element is used more than once.
1. Name
2. Value
<div id=”intro”>
<h1>Introduction</h1>
</div>
- Paragraph – A block of plain text: <p></p>

- Span – Used to separate small pieces of content that are on the same line as others:
<span></span>
Styling Text
- Built-in style sheets render:

1. <em></em> - italic
2. <strong></strong> - bold
- Line break element - Spacing between code in HTML file does not affect positioning of elements
in browser, only composed of a starting tag: <br>
- Unordered list tag – Creates a list in no particular order and outlines individual list items with a
bullet point: <ul></ul>
- List item – Individual list items to be added and used to describe an item in a list: <li></li>
- Ordered list – Each list item is numbered: <ol></ol>
Images
- Adds an image to a webpage: <img> tag

- Self-closing with or without a / at the end: <img src=”image-location.jpg” />
- <img> tag requires an attribute called src with src attribute to be set to image’s source: uniform
resource locator(URL) of image
- alt attribute (alternative text) – Brings meaning to the images on the sites and can be added to
image tag just like src attribute: <img src=”image-location.jpg” alt=”a field of flowers”>
1. Search Engine Optimization(SEO)
2. Screen readers
3. Description of image even when it fails to load
Videos
- NOT self-closing: <video></video>

- <video> tag requires an attribute called src with src attribute to be set to video source
- After src attribute, width and height attributes are used to set video size
- controls attribute include video controls – pause, play, skip
- The text “Video not supported” between opening and closing video tags, is displayed if browser
fails to load video:
<video src=”myvideo.mp4” width=”320” height=”240” controls>
Video not supported
</video>
HTML DOCUMENT STANDARDS
- Document type declaration – Instruction that tells browsers: <!DOCTYPE html>

1. Type of document
2. Version of HTML is used
- Content is interpreted as a HTML code within these tags <html></html>
Head element
- Contains metadata(page information) that is NOT displayed on webpage

- Browser tab – displays title specified inside of <head></head>: <title></title>
- Body element – Only content inside <body></body> can be displayed to the screen.
Linking to other webpages
- Anchor element: <a></a>

- Hyperlink reference – Used to link to a path: href attribute
- target attribute – Used to open new websites in new tabs:
<a href=”https://www.wikipedia.org/” target=”_blank”>This is a link</a>
Linking to relative pages
- Absolute path – Full URL stored in a different folder:

https://www.codeacademy.com/learn/learn.html
- Relative path – Filename that shows path to a file in the current folder with ./: ./index.html
- HTML files for a project are stored in root directory and these webpages in the same folder can
be linked with a relative path:
<a href=”./contact.html”>Contact</a>
Linking at will
- Wrap an element with an anchor element – Turns any element into a link:
<a href=”https://en.wikipedia.org/wiki/Opuntia” target=”_blank”><img src=”#” alt=”a pear
fruit”></a>
Linking to same page
- To link to a target on the same page:

<a href=”#introduction”>Introduction</a>
- The target must have an id:

<div id=”introduction”>content</div>
Whitespaces and indentations
- Better readability
- Comments – To better understand the code and experiment without deleting old codes: 
TABLES
- Table element – Create tables that will contain data: <table></table>

- Table row element – Add rows: <tr></tr>
- Table data element – Add data: <td></td>
- Table heading element – Must be placed within table rows to add titles to rows and columns:
<th></th>
- scope attribute takes 1 of 2 values:
1. row – Heading for row
2. col – Heading for column
<table>
<tr>
<th scope=”col”>Saturday</th>
<td>content</td>
</tr>
</table>
- Table border via CSS:

table, td{
Border: 1px solid black;
}
- Spanning columns – Span multiple columns using colspan attribute

- Spanning rows – Span multiple rows using rowspan attribute:
<table>
<tr>
<td rowspan=”2”>Available</td>
<td colspan=”2”>Available</td>
</tr>
</table>
- Table head element – Contain all of the table’s headings: <thead></thead>

- Table body element – Contain all of the table’s data, excluding headings: <tbody></tbody>
- Table footer element – Section off bottom part of a long table: <tfoot></tfoot>
<table>
<tfoot>
<tr>
<th></th>
<td></td>
</tr>
</tfoot>
</table>
CASCADING STYLE SHEETS – CSS SETUP AND SELECTORS
- A language used to style HTML content on a webpage
Inline styles
- CSS codes written directly within HTML code

- Add style attribute into the opening tag and set it equal to the CSS style
- More styles can be added by adding style attributes ending with ; :
<p style=”color: red; font-size: 20px;”>I’m learning to code!</p>
- Limitations when styling multiple same elements as they have to be added manually
CSS
- Written between <style></style> tags which are placed inside of <head></head> element:
<head>
<style>
p{
color: red;
font-size: 20px;
}
</style>
</head>
.css file
- Developers avoid mixing code by storing HTML and CSS code in separate files
- <link> element – Must be placed within the head of HTML file to link HTML and CSS, it is a self-
closing tag
1. href attribute – like the anchor element, must be the address to the CSS file
2. type attribute – type of document that is linked to E.g CSS file: text/css attribute
3. rel attribute – describes the relationship between HTML and CSS: stylesheet
<link href=”https://www.codeacademy.com/stylesheets/style.css” type=”text/css”
rel=”stylesheet”>
<link href=”./style.css” type=”text/css” rel=”stylesheet”>
Tag Name
- CSS select HTML elements by using element’s tag name that’s between HTML angle brackets
- CSS syntax for selecting <p> elements:
p{
}
- All paragraph elements will be selected using a CSS selector p
Class Name
- HTML elements can have class attribute which can be selected

- . must be prepended to class’s name to select a HTML element by its class using CSS
- Multiple classes can be added to a HTML element’s class attribute by separating with a space:
<h1 class=”green bold”>
</h1>
.green {
color: green;
}
.bold {
font-weight: bold;
}
ID Name
- When a HTML needs to be styled uniquely

- Add an ID to the element with an id attribute:
<h1 id=”large-title”>
</h1>
- CSS can select HTML elements by prepending id name with # :

#large-title {
Specificity
- CSS classes are meant to be reused over many elements, classes can be mixed
- An ID is meant to style only one element and overrides class and tag styles and only on elements
that need to appear the same
- ID  Class  Tag
Chaining Selectors
- Chaining of 2 or more CSS selectors in a HTML element
- h1 elements that have a class of special will be selected:
h1.special {
Nested Elements
- CSS also supports selecting elements that are nested within other elements
- .main-list selects the .main-list element and nested <li> are selected resulting in .main-list li as
final selector:
<ul class=’main-list’>
<li></li>
</ul>
- .main p has a class and a p tag as its selector, only p elements inside .main element will appear
red
p{
color: blue;
}
.main p {
color: red;
}
Important
- Almost never used since it is very hard to override

- !important is more specific than IDs
- All p elements will appear blue:
p{
color: blue !important;
}
.main p {
color: red;
}
Multiple selectors
- Add CSS styles to multiple CSS selectors by a comma to prevent repetitive code
h1,
.menu {
font-family: Georgia;
}
CSS VISUAL RULES
CSS Structure
- CSS declaration written inside the body of a CSS selector:

1. Property – Size, color etc
2. Value – 18px for size, blue for color etc
- CSS rule or rule set:
h1 {
color: blue;
}
- Typeface or font family

1. Font specified must be install on computer
2. Default typeface – Times New Roman
3. Limit number of typefaces used to 2, 3 for webpage to load faster
4. When typeface consists of more than 1 word, enclose its name in “” :
h1 {
font-family: “Courier New”;
}
- Font Size
- Font weight – Controls how bold, thin or normal text appears
- Text Align – Aligns text left, right or center to the element holding it aka parent
- Color affects:
1. Foreground color – color
2. Background color – background-color
- Opacity – 0 representing invisible and 1 representing opaque
- Background Image – When the file exists inside an image folder in the project, the relative path:
.main-banner {
background-image:
url(“images/mountains.jpg”)
}
CSS – THE BOX MODEL
- All elements on a webpage are interpreted by browser as “living” inside a box
The Box Model

- Set of properties which define parts of element that take up space on a webpage:
1. Width and height – Specifies the width and height of the content area
2. Padding – Specifies the amount of space between the content area and the border
3. Border – Specifies the thickness and style of the border surrounding content area and
padding
4. Margin – Specifies the amount of space between border and the outside edge of the
element
Height and Width
- height and width in pixels set the exact size of an element’s box – Same size on all devices:
p{
height: 80px;
width: 240px;
}
Borders
- A line that surrounds an element and can be set with 3 properties set in one line of code:
1. width – Thickness of border: pixels or thin, medium or thick
2. style – Design of the border: none, dotted and solid
3. color – Color of border
- Border Radius – Modifies the corners of an element’s border box with border-radius property
such that all 4 corners with the same curvature as a circle with radius 5 pixels
p{
border: medium none color;
border-radius: 5px;
}
Padding
- Space between contents of a box and borders of a box with padding property:
p.content-header {
padding: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
- 4 values correspond to amount of padding in a clockwise rotation:

p.content-header {
padding: 6px 11px 4px 9px;
}
- Top = bottom values and left = right values:

p.content-header {
padding: 5px 10px;
}
Margin
- Space directly outside of the box

- Similar to padding
p{
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
Auto
- margin property allows the centering of content

- 0 sets top and bottom margins to 0px and auto value adjusts left and right until it is centered
- Width must be set for element
div.headline {
width: 400px;
margin: 0 auto;
}
Margin Collapse
- Top and bottom margins – Vertical margins, collapse while top and bottom paddings do not:
#img-one {
margin-right: 20px;
}
#img-two {
margin-left: 20px;
}
Horizontal margin between = 40px
- Left and right margins – Horizontal margins and paddings are added together:
#img-one {
Margin-bottom: 30px;
}
#img-two {
Margin-top: 20px;
}
Vertical margin between = 30px
- Adjacent horizontal margins are added together while adjacent vertical margins do not add and
the larger of the 2 margins sets the distance
Minimum and Maximum Height and Width
- Limits how an element’s box can be sized when viewed through different displays
1. min-width and max-width – Minimum and maximum width
2. min-height and max-height – Minimum and maximum height
p{
min-width: 300px;
Max-width: 600px;
Min-height: 150px;
Max-height: 300px;
}
Overflow
- overflow property controls what happens to content that overflows outside its box:
1. hidden – overflows hidden from view
2. scroll – the rest of the content can be viewed by scrolling
3. visible – default value where overflow will be displayed outside of containing element
p{
overflow: scroll;
}
Resetting Defaults
- Web browsers have a default user agent(browser) stylesheets

- Resets default margin and padding values in order to work with a clean slate:
*{
margin: 0;
padding: 0;
}
Visibility
- visibility: hidden – Webpage only hides the content and will still leave an empty space where the
element is intended to display
- display: none – Element will completely be removed from webpage
1. hidden – hides an element
2. visible – displays an element
<ul>
<li class=”future”>Donate</li>
</ul>
.future {
visibility: hidden;
}
JAVASCRIPT
Console
- A panel that displays important messages, errors for developers since work done by computers
are invisible to us  Print or log to console if we want to see it on screen
- “console” keyword – an object, collection of data and actions
- “.log()” is a method/action that allows us to print/ log whatever that’s inside the parentheses to
the console: console.log(5);
- Semicolon denotes the end of the line/ statement
Comments
- Explain what the code is doing, leave instructions or add useful annotations
1. Single line comment(//) – Comment out a single line by preceding or after a line of code
2. Multi-line comment – Comment out a single line or comment something out in the middle
of a line: /* - Beginning; */ - End
Data types
- Different kinds of data used

1. Number – Any number, including decimals
2. String – Any grouping of characters(letters, numbers, spaces, symbols) surrounded by single
or double quotes
3. Boolean – True or false
4. Null – Intentional absence of a value with the keyword null(without quotes)
5. Undefined – Denoted by keyword undefined(without quotes), also represents absence of a
value though used differently compared to null
6. Symbol – Unique identifiers, useful in complex coding
7. Object – Collections of related data
Arithmetic Operators
- A character that performs a task in our code: +; -; *; /; %(modulo)

String Concatenation
- ‘+’ operator appends one string to another
Properties
- Browser saves new pieces of data as an instance of data type; every string instance has a
property called “length” stores the number of characters in that string
- Dot operator – Append string with “.”(period) and the property name:
console.log(‘hello’.length);
Method (Built-in string methods)
- Actions that we can perform:

1. .toUpperCase() method – called on the string instance ‘hello’, result is then logged to
console: console.log(‘hello’.toUpperCase()); ’HELLO’
2. .startsWith() method – called on the string instance ‘Hey’, this method also accepts
character ’H’ as an input or argument between parentheses and since it does start with ‘H’,
returns Boolean ‘true’: console.log(‘Hey’.startsWith(‘H’));  true
Built-in Objects
- There are other objects built into JavaScript other than “console” such as Math:
1. .random() method – returns a random number between 0 and 1:
console.log(Math.random()); generate random number between 0 and 50 but will likely
evaluate to a decimal: console.log(Math.random() * 50);
2. .floor() method – ensures a whole number by taking a decimal number and rounds down to
nearest whole number: console.log(Math.floor(Math.random() * 50));
Variables
- Container for a value that is stored in a computer’s memory

- Provide a way of labeling data with descriptive name to be better understood
1. Create variable with descriptive name
2. Store/ update info stored in variable
3. Reference or get info stored in variable
- Rules for naming variables:
1. Cannot start with numbers
2. Case sensitive
3. Names cannot be same as keywords
- “var” keyword – Javascript keyword that creates or declares a new variable
- “myName” keyword – variable’s name by camel casing  group words into 1, first word
lowercase then every word have 1st letter uppercased.
- “=” – Assignment operator
- ‘Arya’ – myName variable is initialized with a value of ‘Arya’
- Declare variable and reference the variable name console.log(myName) so that the string value
‘Arya’ is printed to the console:
var myName = ‘Arya’;
console.log(myName);
- “let” keyword – signals that the variable can be reassigned a different value and “let”/”var” can
be declared without assigning a value and it will automatically be initialized with a value of
undefined.
- “const”(constant) keyword – store any value but cannot be reassigned because it is constant or
else there will be a TypeError; must be assigned a value or it will get a SyntaxError
Mathematical Assignment Operators
- Using built-in mathematical assignment operators; -=, *=, /= :

let w = 4;
w += 1;
console.log(w);
- Increment operator – increase value of variable by 1 and variable’s value is updated and
assigned as new value: ++
- Decrement operator – decrease value of variable by 1 and variable’s value is updated and
assigned as new value: --
- String Concatenation with Variables:
let myPet = ‘armadillo’;
console.log(‘I own a pet ‘ + myPet + ‘.’);
String Interpolation
- Insert or interpolate variables into strings using template literals to log strings together
- A template literal is wrapped by ` and ${myPet} is the placeholder inside the template literal
- Biggest benefit is the readability of code and escaping quotes:
const myPet = ‘armadillo’;
console.log(`I own a pet ${mypet}.`);
typeof operator
- Keep track of the data types of the variables:

const unknown1 = ‘foo’;
console.log(typeof unknown1); //Output: string
Conditional Statements
The if statement composed of –
1. if keyword followed by a set of parentheses (), followed by a code block/ block statement
indicated by set of curly braces {}
2. inside parentheses() is a condition true or false
3. if condition evaluates to true, code inside curly braces {} runs/executes
4. if condition evaluates to false, block would NOT execute
If… Else statements
- allow binary decisions

- else statement – run a block of code if condition evaluates to false
1. else keyword following code block of an if statement
2. has a code block wrapped by set of curly braces {}
3. code inside else statement code will execute when the if statement condition evaluates to
false
Comparison operators
- different types of operators to compare values:

1. less than: <
2. greater than: >
3. less than or equal to: <=
4. greater than or equal to: >=
5. equal to: ===
6. is not equal to: !==
Logical operators
- operators that work with Boolean values:

1. and operator: && - checking that both conditions are true
2. or operator: || - either condition being true
3. not operator aka bang operator: ! – reverses/ negates the value of a Boolean
- logical operators are often used in conditional statements to add another layer of logic to the
code
Truthy and falsy
- non boolean data types like strings or numbers are evaluated when checked inside a condition;
will run as long as is a non-falsy value
- just to check if a variable exists and has been assigned to a value
- list of falsy values:
1. 0
2. Empty string ‘’/””
3. Null – no value at all
4. Undefined – declared variable lacks a value
5. NaN(not a number)
Short circuit evaluation
Ternary Operator
- Short-hand syntax to simplify if…else statement

1. Condition “isNightTime” is provided before the ?
2. Two expressions follow the ? and are separated by a colon :
3. If condition evaluates to true, first expression executes
4. If condition evaluates to false, second expression executes
isNightTime ? console.log(‘Turn on the lights!’) : console.log(‘Turn off the lights!’);
Else if statements
- Add more conditions to our if…else statements
let stopLight = ‘yellow’;
if (stopLight === ‘red’){
console.log(‘Stop!’);
} else if (stoplight === ‘yellow’){
console.log(‘Slow down.’);
} else {
console.log(‘Caution, unknown!’);
The switch keyword
- Check multiple values and handling them differently

- Alternative syntax that is easier to read and write
1. Switch keyword initiates statement, followed by (…), which contains the value that each
case will compare
2. Inside the block {…} there are multiple “case”s The

Introduction To HTML

Uploaded by

Copyright:

Available Formats

You might also like

Introduction To HTML

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Introduction To HTML

Uploaded by

Copyright:

Available Formats

INTRODUCTION TO HTML

HTML (HyperText Markup Language)

- Provides access to other text via links aka hyperlinks.

- Heading element – 6 different types from <h1> to <h6>.

- Paragraph – A block of plain text: <p></p>

- Built-in style sheets render:

- Adds an image to a webpage: <img> tag

- NOT self-closing: <video></video>

HTML DOCUMENT STANDARDS

- Document type declaration – Instruction that tells browsers: <!DOCTYPE html>

- Contains metadata(page information) that is NOT displayed on webpage

Linking to other webpages

- Anchor element: <a></a>

Linking to relative pages

- Absolute path – Full URL stored in a different folder:

Linking to same page

- To link to a target on the same page:

- The target must have an id:

Whitespaces and indentations

- Table element – Create tables that will contain data: <table></table>

- Table border via CSS:

- Spanning columns – Span multiple columns using colspan attribute

- Table head element – Contain all of the table’s headings: <thead></thead>

CASCADING STYLE SHEETS – CSS SETUP AND SELECTORS

- A language used to style HTML content on a webpage

- CSS codes written directly within HTML code

- HTML elements can have class attribute which can be selected

- When a HTML needs to be styled uniquely

- CSS can select HTML elements by prepending id name with # :

- Almost never used since it is very hard to override

CSS VISUAL RULES

- CSS declaration written inside the body of a CSS selector:

- Typeface or font family

CSS – THE BOX MODEL

- All elements on a webpage are interpreted by browser as “living” inside a box

The Box Model

Height and Width

- 4 values correspond to amount of padding in a clockwise rotation:

- Top = bottom values and left = right values:

- Space directly outside of the box

- margin property allows the centering of content

Minimum and Maximum Height and Width

- Web browsers have a default user agent(browser) stylesheets

- Different kinds of data used

- A character that performs a task in our code: +; -; *; /; %(modulo)

- ‘+’ operator appends one string to another

Method (Built-in string methods)

- Actions that we can perform:

- Container for a value that is stored in a computer’s memory

Mathematical Assignment Operators

- Using built-in mathematical assignment operators; -=, *=, /= :

- Keep track of the data types of the variables:

The if statement composed of –

If… Else statements

- allow binary decisions

- different types of operators to compare values:

- operators that work with Boolean values: