html basics ii_2q

7/30/2019 HTML Basics II_2Q

1/16

HTML BASICS II


2/16

Types of tags

The containertag always wrapsaround text orgraphics and comesin a set with anopening and aclosing:

The html tags arecontainer tags

opening tag closing tag

The empty tag stands

alone. Empty tags do not have

to be wrapped around

copy and do not require

a closing.

The break tags is an

example of an empty tag

is one that adds a

line break

Container tags Empty tags


3/16

What are HTML attributes?

An HTML attribute is a modifier of an HTML

element.

HTML attributes need to be specified

HTML attributes generally appear as name-

value pairs, separated by "=", and are written

within the start tag of an element, after the

element's name: (content to be modified

by the tag)


4/16

Common attributes

font face

font color font size

align

bgcolor alt

img

font face = Arial

font color = 00FFCC font size =7

align = center

bgcolor = FFCC99 alt = Perls Duck

img src = mucky duck.jpg

Attributes Examples


5/16

Inserting Images

Images are a staple of any web designer, so it isvery important that you understand how to usethem properly.

In order to place an image onto a website, oneneeds to know where the image file is locatedwithin the file tree of the web server

the URL (Uniform Resource Locator).

The source attribute (src) is what makes animage tag display an image. An image source is aURL value and should point to the directorylocation of an image file.


6/16

It also supports drop shadow effects.

Common Image File Types


7/16

IMAGE ELEMENTS

PARAMETERS

IMG stands for "image." It announces to the

browser that an image will go here on the

page.

SRC stands for "source." This again is anattribute, a command inside a command. It's

telling the browser where to go to find the

image. It's best to place the images you want

to use in a subdirectory called "images".


8/16

IMAGE ELEMENTS

PARAMETERS

When choosing the resolution size for thegraphics for web display, it will be easier for anyweb browser to upload web graphics ranging from

72-90 pixels.

When naming an image, there is a name (image)then a dot and then there is a suffix (gif).

Examples:

Duck.jpg Duck.png

Duck.gif

Duck. bmp


9/16

IMAGE ELEMENTS

PARAMETERS

ALT stands for "alternate text". This tells the browsers

that if it cant find the image, then just display this text.

It also tells anyone who can't view your image what

the image is about.

Example:

WIDTH stands for the width of the image in pixels. It

can range from 1 pixel to, well, just about any number,

but generally will be less than the width of the webbrowser.

HEIGHT stands for the height of the image in pixels.

Again, the height can be just about anything, but

generally will be less than the height of the webbrowser.


10/16

Height and width are HTML attributes that define an

element's height and width properties. These values can

either be percentage-based (%) or rely on pixel sizes.

Here are two things to remember when trying to place

images on your web page:1. RATIO -The ratio is critical, and must be maintained to

avoid skewing.

2. SCALE -Larger images will always scale down nicely

and continue to look sharp.


11/16

Images can be aligned horizontally to the right or

to the left of other elements using

the alignattribute. Image elements are aligned

to the left by default.


12/16

HEXADECIMAL COLORS

HTML colors are defined using a hexadecimal

notation (HEX) for the combination of Red,

Green, and Blue color values (RGB).

What are HEXADECIMAL COLORS? 0 1 2 3 4 5 6 7 8 9 a b c d e f


13/16

FONT

The tag provides no real functionality by

itself, but with the help of a few attributes, this

tag is used to change the style, size, and color

of HTML text elements. The size, color, and face attributes can be

used all at once or individually, providing users

with the ability to create dynamic font styles for

any HTML element.

I am Calibri


14/16


15/16

Horizontal line

NESTED TAGS


16/16

html basics ii_2q

Documents