Lecture 1 – 04/27
Internet
A worldwide system of interconnected computer networks that all use the TCP/IP protocol
suite to transfer packets of information.
TCP/IP always stays together. TCP – transport control protocol. IP – internet protocol.
Each computer on one of these networks is assigned an IP address.
It can send and receive packets with other computers
Each packet may travel a unique route
World Wide Web
World Wide Web (WWW) is a system enabling documents and related web resources to be
accessed over the Internet and displayed on a browser.
Every resource (document) has an address (that is a URL)
HTTP is the protocol that makes this work.
HTTPS is the secure version of HTTP
HTML
Dictates: CONTENT and STRUCTURE of webpage.
A system of instructions for displaying a document in a web browser – more than this.
Used to publish online documents, retrieve online info via hypertext links, design forms, include
apps in documents (images, audio, etc.), and convey semantic information to aid accessibility
and search engine optimization (Semantic Design)
Structure of HTML
o <tag> content </tag>
HTML is the markup language used by the web.
Can provide:
o Structure to the document
o Embedded meaning for document structures
o Page layout information
o Text formatting for enhancement
H1 through H6 are all the same sizes!!!!! ON EXAM
The purpose of HTML is to add semantic meaning and structure to the document’s content.
This is called semantic markup.
HTML is not intended to describe how the content should look (its presentation)
CSS
Modifies: DESIGN and DISPLAY of HTML elements
Used to design colors, fonts, and layouts.
Used to adapt display across platforms (different types of devices like large screens, small
screens, etc.)
Easier site maintenance (style can be modified without changing the HTML elements
Tailor pages (modify multiple webpages using a single style sheet)
Structure of CSS
o {property:value;}
The purpose of CSS is to add layout and presentation enhancements.
Document Object Model (DOM)
The way elements relate to one another forms an outline-like structure called the DOM
How the browser interacts with the document
Browser wants the document to be organized like a tree rather than a string of text.
Content Structured into an HTML Document
The DOCTYPE declaration tells the browsers that the document is written according to the
HTML5 specification.
The html element is the root element that contains all the
elements in the document.
The head element contains elements that pertain to the document
and are not rendered as content, such as title, metadata, style
sheets, and scripts.
o Comes before the body element.
o Head element is used for meta-information about the
document.
o Includes meta and title elements
The body element contains the content of the document. The
content is everything you want to show up in the browser window.
o h1 element is within the body.
Lecture 2 – 04/03
Why do we need <meta charset=”UTF-8”>
Used to declare the character encoding for HTML document
Purpose is to ensure that the web browser or other user agents correctly interpret the
characters used in the document.
We are telling the browser that the document uses 8-bit unicode
HTML Document Structure
The structure of an HTML document are the relationships among the elements that comprise
the document
An HTML document’s elements MUST have a tree relationship for the browser to render it.
o Each element has 1 parent and 0 to many children
o Except the root element <html>, which has no parent, by definition.
Good structure is HTML standards compliant
Semantics
Adds meaning to your document by labeling what each item is in as detailed and accurate way
as reasonable.
Good semantics communicates to your audience of searchbots, browsers, apps, developers,
etc.
The goal in writing a good document semantics is to optimally convey what the meaning of the
document’s content elements are
Why Semantic HTML is important:
Makes sites more accessible
o Screen readers receive guidance for how to present content in a non-visual manner
Easier to develop (and maintain)
o You get some functionality for free, plus it is arguably easier to understand
Better on mobile
o Semantic HTML is arguably lighter in file size than non-semantic spaghetti code, and
easier to make responsive.
Enables web app functionality
o Web apps can use semantic information to more effectively provide their service
Good for SEO
o Search engines give more importance to keywords inside headings, links, etc. than
keywords included in non-semantic <div>s, etc., so your documents are more findable
by customers/users.
HTML5 breaks body elements into 10 functional categories:
1. Content Sectioning
a. Organizes document content into structural outline
2. Content Grouping
a. Organizes blocks/sections of content to identify the purpose or structure of that content
3. Inline Text-level Semantics
a. Defines meaning, or structure of a word, line, or arbitrary piece of text
b. These elements add ONLY semantics (inside a block of the structure). They are all
INLINE elements that hold minimal space.
4. Image, Multimedia, & Embedded Content
a. Supports various multimedia resources
5. Interactive
6. Demarcating Edits
7. Tabular Content
8. Form Content
9. Web Components
10. Obsolete and Depreciated Elements
Block Elements
Are always rectangles by default
Expand horizontally to take up as much space as they can
Only hold as much vertical space as they need to hold their content
Always stack vertically by default
o Because they hold the full horizontal by default
You can adjust this in CSS
Sectional and Grouping elements = block elements by default
Inline Elements
Do NOT hold rectangular shape.
Hold only as much horizontal and vertical space as they need to hold their content.
