INTRO TO HUMAN COMPUTER INTERACTION

Created by

Justin Del

Cards (55)

HTML 
HyperText Markup Language
HTML 
The standard markup language for creating Web pages
HTML stands for Hyper Text Markup Language
HTML 
Describes the structure of Web pages using markup
HTML elements are the building blocks of HTML pages
HTML elements 
Represented by tags
HTML tags 
Label pieces of content such as "heading", "paragraph", "table", and so on
Browsers do not display the HTML tags, but use them to render the content of the page
<!DOCTYPE html> declaration 
Defines this document to be HTML5
<html> element 
The root element of an HTML page
<head> element 
Contains meta information about the document
<title> element 
Specifies a title for the document
<body> element 
Contains the visible page content
<h1> element 
Defines a large heading
<p> element 
Defines a paragraph
HTML tags 
Element names surrounded by angle brackets
HTML tag pairs 
The first tag is the start tag, the second tag is the end tag
Web browsers 
Read HTML documents and display them
Do not display the HTML tags, but use them to determine how to display the document
<!DOCTYPE> declaration 
Represents the document type, and helps browsers to display web pages correctly
Must only appear once, at the top of the page (before any HTML tags)
Not case sensitive
<!DOCTYPE> declaration for HTML5 
<!DOCTYPE html>
For learning HTML, a simple text editor like Notepad (PC) or TextEdit (Mac) is recommended
Save the HTML file on your computer, name it "index.htm" and set the encoding to UTF-8
HTML headings
Defined with the <h1> to <h6> tags
<h1> defines the most important heading, <h6> defines the least important heading
HTML paragraphs
Defined with the <p> tag
HTML links
Defined with the <a> tag
The link's destination is specified in the href attribute
HTML attributes
Used to provide additional information about HTML elements
Specified in the start tag
Usually come in name/value pairs like: name="value"
HTML buttons 
Defined with the <button> tag
HTML images
Defined with the <img> tag
The source file (src), alternative text (alt), width, and height are provided as attributes
HTML elements
Usually consist of a start tag and end tag, with the content inserted in between
Empty elements do not have an end tag, such as the
element
Use lowercase tags in HTML
HTML attributes
All HTML elements can have attributes
Provide additional information about an element
Specified in the start tag
Usually come in name/value pairs like: name="value"
HTML links
Defined with the <a> tag
The link address is specified in the href attribute
HTML images
Defined with the <img> tag
The filename of the image source is specified in the src attribute
Have a set of size attributes, which specifies the width and height of the image
The alt attribute specifies an alternative text to be used, when an image cannot be displayed
HTML style attribute
Used to specify the styling of an element, like color, font, size etc.
HTML lang attribute
The language of the document can be declared in the <html> tag
Declaring a language is important for accessibility applications (screen readers) and search engines
HTML title attribute
Provides additional "tool-tip" information about an element
Always quote attribute values with double quotes in HTML
CSS 
Cascading Style Sheets
CSS 
Describes how HTML elements are to be displayed on screen, paper, or in other media
Saves a lot of work by controlling the layout of multiple web pages all at once
Ways to add CSS to HTML
Inline - by using the style attribute in HTML elements
Internal - by using a <style> element in the <head> section
External - by using an external CSS file
The most common way to add CSS is to keep the styles in separate CSS files