Lecture1 Notes
Download
Report
Transcript Lecture1 Notes
CS 1220 Web Programming
Fall 2016 CSULA
Saloni Chacha
HTML5 Introduction
• HTML is a markup language for describing web documents (web
pages).
• HTML stands for Hyper Text Markup Language
• A markup language is a set of markup tags
• HTML documents are described by HTML tags
• Each HTML tag describes different document content
Sample HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
• The <!DOCTYPE html> declaration defines this document to be HTML5
• The text between <html> and </html> describes an HTML document
• The text between <head> and </head> provides information about the
document
• The text between <title> and </title> provides a title for the document
• The text between <body> and </body> describes the visible page content
• The text between <h1> and </h1> describes a heading
• The text between <p> and </p> describes a paragraph
HTML Tags
• HTML tags are keywords (tag names) surrounded by angle brackets:
• <tagname>content goes here...</tagname>
• HTML tags normally come in pairs like <p> and </p>
• The first tag in a pair is the start tag, the second tag is the end tag
• The end tag is written like the start tag, but with a forward
slash inserted before the tag name
The <!DOCTYPE> Declaration
• The <!DOCTYPE> declaration represents the document type, and
helps the browser to display a web page correctly.
• It must only appear once, at the top of the page (before any HTML
tags).
• There are different document types. To display a web page correctly,
the browser must know both type and version.
• The doctype declaration is not case sensitive. All cases are acceptable:
<!DOCTYPE html>
<!doctype HTML>
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“
• The lang Attribute
• The language of the document can be declared in the <html> tag.
• The language is declared with the lang attribute.
• Declaring a language is important for accessibility applications
(screen readers) and search engines: <html lang="en-US">
The href Attribute
• HTML links are defined with the <a> tag. The link address is specified
in the href attribute:
<a href="http://www.w3schools.com">This is a link</a>
Size Attributes
• HTML images are defined with the <img> tag.
• The filename of the source (src), and the size of the image
(width and height) are all provided as attributes:
<img src="w3schools.jpg" width="104" height="142">
The alt Attribute
• The alt attribute specifies an alternative text to be used, when an
image cannot be displayed.
• The value of the attribute can be read by screen readers. This way,
someone "listening" to the webpage, e.g. a blind person, can "hear"
the element.
•
<img src="w3schools.jpg" alt="W3Schools.com" width="104" hei
ght="142">
Size Attributes
• HTML images are defined with the <img> tag.
• The filename of the source (src), and the size of the image
(width and height) are all provided as attributes:
<img src="w3schools.jpg" width="104" height="142">
Why Use CSS?
• CSS is used to define styles for your web pages, including the design, layout
and variations in display for different devices and screen sizes.
• HTML was NEVER intended to contain tags for formatting a web page!
• HTML was created to describe the content of a web page, like:
• <h1>This is a heading</h1>
• <p>This is a paragraph.</p>
• When tags like <font>, and color attributes were added to the HTML 3.2
specification, it started a nightmare for web developers. Development of
large websites, where fonts and color information were added to every
single page, became a long and expensive process.
• To solve this problem, the World Wide Web Consortium (W3C) created CSS.
• CSS removed the style formatting from the HTML page!
CSS Syntax
• A CSS rule-set consists of a selector and a declaration block:
Syntax
• The selector points to the HTML element you want to style.
• The declaration block contains one or more declarations separated by
semicolons.
• Each declaration includes a CSS property name and a value, separated
by a colon.
• A CSS declaration always ends with a semicolon, and declaration
blocks are surrounded by curly braces.
• In the following example all <p> elements will be center-aligned, with
a red text color:
Syntax
•p{
color: red;
text-align: center;
}
CSS Selectors and Element Selector
• CSS selectors are used to "find" (or select) HTML elements based on
their element name, id, class, attribute, and more
• The element selector selects elements based on the element name.
• You can select all <p> elements on a page like this (in this case, all <p>
elements will be center-aligned, with a red text color):
p{
text-align: center;
color: red;
}
The id Selector
• The id selector uses the id attribute of an HTML element to select a
specific element.
• The id of an element should be unique within a page, so the id
selector is used to select one unique element!
• To select an element with a specific id, write a hash (#) character,
followed by the id of the element.
• The style rule below will be applied to the HTML element with
id="para1":
The id Selector
• #para1 {
text-align: center;
color: red;
}
The class Selector
• The class selector selects elements with a specific class attribute.
• To select elements with a specific class, write a period (.) character,
followed by the name of the class.
• In the example below, all HTML elements with class="center" will be
red and center-aligned:
.center {
text-align: center;
color: red;
}