Computer Science HTML Study Guide
HTML Tags?
-HTML tags label pieces of content Ex. Heading, paragraph, and table <p> = start tag </p> = end tag
What is HTML?
-standard markup language for creating Web pages.
<!DOCTYPE html>
<!DOCTYPE html>
HTML headings are defined?
<h1>-<h6>
bookmark creation
<h2 id="C4">Chapter 4</h2> <a href="#C4">Jump to Chapter 4</a>
HTML page structure
<html> <head> <title></title> </head> <body> <h1></h1> <p></p> <p></p> </body> </html>
Image Maps
<map> tag defines an image-map which is a image with clickable areas. The tag comes from the <img>'s usemap attribute and creates a relationship between the image and the map. <area> tags are included in the map tags to define the clickable areas in the image-map
syntax
<tagname style="property:value;">
HTML Screen Readers
A screen reader is a software program that reads the HTML code, converts the text, and allows the user to "listen" to the content. Screen readers are useful for people who are blind, visually impaired, or learning disabled.
HTML Link Colors
An unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and red
Browsers vs. HTML tags
Browsers do not display the HTML tags, but use them to render the content of the page
property
CSS property
Value
CSS value
CSS stands for?
Cascading Style Sheets.
external paths
External pages can be referenced with a full URL or with a path relative to the current web page.
External references
External style sheets can be referenced with a full URL or with a path relative to the current web page
HTML elements represents?
HTML elements are represented by tags
What are HTML elements?
HTML elements are the building blocks of HTML pages
HTML stands for?
Hyper Text Markup Language
Images in Another Folder
If not specified, the browser expects to find the image in the same folder as the web page. However, it is common to store images in a sub-folder. You must then include the folder name in the src attribute:
What are the three ways CSS can be added to HTML elements?
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
Images on Another Server
Some web sites store their images on image servers. Actually, you can access images from any web address in the world
id attribute
To define a specific style for one special element, add an id attribute to the element then define a style for the element with the specific id
class attribute
To define a style for a special type of elements, add a class attribute to the element then define a style for the elements with the specific class
Using an Image as a Link
To use an image as a link, simply nest the <img> tag inside the <a> tag
href attribute
added into the <a> and the attribute is href to put in links
Title attribute
added into the <p> tag and the attribute is title
inline CSS
applies a unique style to a single html element and the attribute used is style
id
attribute (id="value") to define bookmarks in a page
href
attribute to define the link address attribute (href="#value") to link to the bookmarklink text
target
attribute to define where to open the linked document _blank - Opens the linked document in a new window or tab _self - Opens the linked document in the same window/tab as it was clicked (this is default) _parent - Opens the linked document in the parent frame _top - Opens the linked document in the full body of the window framename - Opens the linked document in a named frame
local links
comes from the same website
<head>
container for metadata; placed between <html> tag and <body> tag
<hr>
creates a horizontal line
internal CSS
define a style for a single HTML page. defined in the <head> section of an HTML page, within a <style> element:
External CSS
define the style for many HTML pages. add a link to it in the <head> section of the HTML page should not have HTML code and must be saved with a .css extension
CSS border
defines a border around an HTML element
CSS margin
defines a margin (space) outside the border
CSS padding
defines a padding (space) between the text and the border:
<pre>
defines preformated text and displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks
HTML describes what?
describes the structure of Web pages using markup
<img>
element (inside <a>) to use an image as a link
<head>
element contains meta information about the document
<body>
element contains the visible page content
<h1>
element defines a large heading
<p>
element defines a paragraph
<html>
element is the root element of an HTML page
<title>
element specifies a title for the document
<a>
element to define a link
HTML Attributes
elements have attributes, provide additional information to the elements, specified in the start tag, and come in name/value pairs
CSS describes
how HTML elements are to be displayed on screen, paper, or in other media.
size attribute
images use the <img> tag and the attributes are width, height, and src
uses of headings
index the structure and content of your web pages
The lang attribute
language can be determined in the <html> tag and the attribute is lang
Image Floating
let the image float to the right or to the left of a text
<br>
line break <br /> = if you want an ending tag but it is not necessary
background-color
property defines the background color for an HTML element.
font-family
property defines the font to be used for an HTML element:
text-align
property defines the horizontal text alignment for an HTML element:
color
property defines the text color for an HTML element:
font-size
property defines the text size for an HTML element:
style attribute
setting the style of an HTML element
HTML display
spaces in the html code are ignored and not shown in web page
width and height attributes
specified in pixels
alt attribute
text when the image cant be displayed and it uses the <img> tag and the attribute is alt
Animated Images
the GIF standard allows animated images:
link text
visible part