HTML TITLE

The Internet Slide 1
d i g i ta l m e d i a l a n d s c a p e s
from w3c
What is HTML
HTML stands for hyper text markup language. Its
refereed to has a markup language because it consists
of a series of markup tags. HTML tags describe content
and must have an open and close tag.
<tagname>content</tagname>
Web Browsers
The purpose of a web browser (such as Google Chrome, Internet
Explorer, Firefox, Safari) is to read HTML documents and display
them as web pages.
The browser does not display the HTML tags, but uses the tags to
determine how the content of the HTML page is to be presented/
displayed to the user
Basic Page Structure
<!DOCTYPE html>
<html>
<body>
HTML uses a open and closed tags to create a

nesting of content. Every webpage has this basic
framework.
<h1>My First Heading</h1>
The parent tag is HTML then the body, where all

the content goes.
</body>
</html>
Every web page has this basic information. The Doctype

refers to the version of html being used. Currently we are
up to HTML 5. Past doctypes look like:
<p>My first paragraph.</p>
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML

4.01 Transitional//EN http://www.
w3.org/TR/html4/loose.dtd>
Syntax
An HTML element starts with a start tag / opening tag
An HTML element ends with an end tag / closing tag
The element content is everything between the start and the
end tag
Some HTML elements have empty content
Empty elements are closed in the start tag
Most HTML elements can have attributes
header
<h1>This is a heading</h1>
paragraph
<p>This is a paragraph.</p>
link
<a href=http://www.w3schools.com>This is a link</a>
image
<img src=w3schools.jpg width=104 height=142>
Attributes
HTML element attributes provide additional information
about the element. They always are included in the start
tag. They come in name/value pairs like:
name=value
alignment
f o r m at i n g
link
<p align=center>center me</p>

<b>make me bold</>
<i>make me italics</i>
<a href=url>link text</a>
<a href=www.cnn.com/>visit cnn</a>
Image Tag
The image tag is whats called an empty tag, which
means it does not have a closing tagit just has
attributes.
<img src=url alt=some_text>
Again the url can be absolute or relative. Alt refers to alt text,
this is the text that shows up when you hover over an image. It
was created so blind people can enjoy images on the internet.
They use screen readers which read describe the image using
the alt text
Images also have a width and height attribute:

<img src=pulpit.jpg
alt=Pulpit rock width=304
height=228>
Lists
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
Head Tag
Most webpages actually have another tag before
the body called the head tag. The head tag includes
scripts, instruct the browser where to find style
sheets, and provide meta information. Common
elements in the head tag.
title of page
<title>title of the page</title>

m e ta d ata
<meta name=keywords content=HTML, CSS, XML, XHTML, JavaScript>

<meta name=description content=Free Web tutorials on HTML and CSS>
Colors
Colors on the internet are defined using HEX
(hexadecimal), which is a translation from RGB
(red, green, blue)
rgb (255,0,0)
red
RGB is considered an additive color space based

on light: it adds shades of red light, to green light to
blue light to achieve the entire spectrum of color.
100% red, green, and blue equals white, thats why
its called an additive color spaceyou add colors
to get white. rgb color is written like rgb(0,0,0).
Each channel (red, green, and blue) can range from
0-255, which refers to its luminosity (how bright
it is). so rgb(0,0,0) means no luminosity, in other
words black.
HEX translate rgb into a six alpha numeric
string consisting of three pairs that describe
each color channel. This allows for 16 million
different colors.
h e x t r a n s l at i o n
#FF000
Images on the Internet

Everything published to the web is optimized as
to keep the file sizes small. Its no different with
imagesimages are are optimized for file size and
quality. The internet supports three image types:
jpg 40%
jpg 60%
jpg 80%
jpg 100%
gif
png
JPEGs are good file types for photography. When

optimizing jpegs its rare to save them at 100%
quality.
GIFs are good for images with solid colors
because they dont save based on pixels bud
store information in color tables. If you save an
photograph as a gif it will band because there is a
limit to the number of colors you can save. Gifs also
support transparency and animation.
PNGs over the highest quality image and support
transparency. They tend to be larger than jpgs.

HTML TITLE

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML TITLE

Încărcat de

Drepturi de autor:

Formate disponibile

The Internet Slide 1

The Internet Slide 2

The Internet Slide 3

Basic Page Structure

HTML uses a open and closed tags to create a

<h1>My First Heading</h1>

The parent tag is HTML then the body, where all

Every web page has this basic information. The Doctype

<p>My first paragraph.</p>

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML

The Internet Slide 4

<a href=http://www.w3schools.com>This is a link</a>

<img src=w3schools.jpg width=104 height=142>

The Internet Slide 5

<p align=center>center me</p>

The Internet Slide 6

Images also have a width and height attribute:

The Internet Slide 7

The Internet Slide 8

<title>title of the page</title>

<meta name=keywords content=HTML, CSS, XML, XHTML, JavaScript>

The Internet Slide 9

RGB is considered an additive color space based

The Internet Slide 10

Images on the Internet

JPEGs are good file types for photography. When

S-ar putea să vă placă și