Hypertext/Hyperlinks/Hypermedia
Hypertext is a form of electronic text document that uses links,
called Hyperlinks, to connect other documents from words or
phrases within a document. Hypermedia is the use of these
links for media like images, videos and audios.
First program to be recognized
as a Web Browser.
Mosaic (1992)
What is HTML
HTML stands for HyperText Markup Language
HTML is designed to describe text documents on the web
http://
HyperText Transfer Protocol provides a standard way of communication between servers and web clients, or browsers, to communicate and transfer
hypertext documents.
The Internet Protocol Suite is a set of communication protocols, including TCP (Transmission Control Protocol) which defines how data is formatted, addressed, transmitted and
routed.
Common HTML Tags
- <p> - Paragraph
</p> - <strong> - bold text</strong>
- <em> - italic text</em>
- <a href=“…”> - link to another page
- <img src=“…”> - image
- <head> - the header of your document
</head> - <body> - the body of your document
</body> - <ol>, <ul>, <li> - lists
</li></ul></ol> - <br></br> - line break
- <div> - division / section
</div>
Elements of HTML
- Elements provide the structure of the HTML page.
- They tell the browser how to read and interpret certain content based on what type it is.
- Elements take the form of <tags>, which are enclosed within pointy brackets.</tags>
- Most elements require an open tag <tag> and a closing tag </tag>, but not all of them
do.
HTML Attributes
- All HTML elements can have attributes.
- Attributes provide additional information about an element.
- Attributes are always specified in the start tag.
- Attributes usually come in name/value pairs like: name=”value”.
Common HTML Attributes
- Alt: Specifies an alternative text for an image, when the image cannot be displayed.
- Disabled: Specifies that an input element should be disabled.
- Href: Specifies the URL (web address) for a link.
- Id: Specifies a unique id for an element.
- src: Specifies the URL (web address) for an image.
- Style: Specifies an inline CSS style for an element.
- Title: Specifies extra information about an element.
Setting up HTML document
<!DOCTYPE html>
HTML comments
<!-- CONTENT -->
What is Semantic HTML
- Semantic elements in HTML are tags that carry meaning about the structure and content of a webpage. ex. <nav>, <header>, <body>, <aside>, <main>, <article>, <section>, <footer>, etc
- Unlike non-semantic elements
like <div> and <span>, which provide no information about their content, semantic elements contribute to the
document’s clarity and help both browsers and developers understand the purpose of each section.</span>
Why use Semantic HTML?
* Clarity and Readability
* Accessibility
* SEO (Search Engine Optimization)
Workflow - Best Practices
Use lowercase letters and no spaces.
You must save your HTML documents with the
“.html” extension for them to be recognizable.
Proper use of <div>
<div> is useful for grouping together a bunch of different HTML elements, and applying various CSS properties to them at one go.
It starts on a new line and takes up the entire width of the page.
<div>
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>
</div>
Proper use of <span></span>
<span> is an inline element used to target specific content in another element.</span>
<p>My mother has <span>blue</span> eyes.</p>
Note: Only the <span></span> enclosed part will be in blue color
What is CSS
Cascading Style Sheet (CSS) is a language that describes the style of an HTML document. This is a standard for styling pages on web which include layout,
design and overall presentation of web pages.
We are also able to easily separate the document content from the document
presentation.
It is read top to bottom, meaning changes at the bottom of the document can override those at the top.
Inline CSS vs CSS in the head vs External CSS
“Inline” CSS implies that CSS is applied directly within the HTML tag of the document, using an attribute within the tags called style.
ex. <h1 style="color:blue;font-family:Arial">Heading 1</h1>
External Stylesheet (recommended)
* The most preferred way of using CSS is by putting it in an entirely new document and linking to it in your <head> tag by declaring it.
In HTML
<head>
<link></link>
</head>
In CSS
h1 {
color: blue;
font-family: Arial;
}
Importing fonts in CSS
@font-face {
font-family: “customFont”;
src: url(../fonts/sampleFont.woff);
}
Class vs ID
id {
- Class and id are attributes that you can add to almost any tag in
order to give them certain qualities within the page. - You can also use class and id to target specific tags within a
category and ignore others.
CLASS is one of the HTML attributes
- class makes it possible to define equal styles for elements with the same class name:
.class {
attribute: value;
}
ID’s also one of the HTML attributes.
- Id specifies a unique id for an HTML element (the value must be unique within the HTML
document).
- id is mostly used to point to a stylesheet, and by JavaScript (via HTML DOM) to manipulate the element with the specific id.
attribute: value;
}
CSS units
CSS has two types of lengths:
* Absolute (px, pt, cm, mm, etc.)
* Relative units (em, rem, vw, vh, vmin, vmax, %, etc.)
Default font-size is 16px or 1rem
* em – is relative to the parent element // e.g. if default is 16px, than 2.5 em is 40px (2.5 x
16 = 40px)
* rem – is relative to the root HTML element (<html>) // calculated the same as em
* Both can use decimal units – e.g. 2.5rem; 1.875em; 1.15rem etc.
CSS box model
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
CSS position types
Position: static;
- This is the default positioning, meaning all HTML elements are placed one below another on the page.
Position: relative;
- This allows us to offset an element to the left, right, bottom, or top of its
default positioning.
Position: fixed;
- This fixes an element in one position, even if the page is scrolled.
Position: absolute;
- This places an element in an absolute position on the page.
Position: sticky;
- This toggles between relative and fixed position depending on scroll position.
CSS display property
display: block
- A block element has some white space above and below it and does not tolerate any HTML elements next to it
display: inline
- An inline element has no line break before or after it, and it tolerates HTML elements next to it
display: inline-block
- An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element
Leading/Kerning/Tracking
Leading: Space between baselines
Kerning: Spacing between letters on an individual level
Tracking: Spacing between letters as a whole
-
acc chap 1-352
-
acc chap 4-663
-
accounting chap 4-663
-
accounting chap 7-944
-
Chapter 1-3 soc10054
-
soc chapter 4-683
-
soc chapter 7-10116
-
Chapter 11-13 soc107
-
soc chap 14-16113
-
criminology test 1 (what is crim - law enters the chat)34
-
crim lecture 6 (8)-1384
-
crim lecture 14-20106
-
AH final contexts41
-
photography36
-
CCT109 midterm30
-
cct109 final35
-
cct110 quiz 152
-
cct110 quiz 254
-
CCT260 Final55
