Date post: | 14-Apr-2018 |
Category: |
Documents |
Upload: | perlishell74 |
View: | 223 times |
Download: | 0 times |
of 16
7/30/2019 HTML Basics II_2Q
1/16
HTML BASICS II
7/30/2019 HTML Basics II_2Q
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
7/30/2019 HTML Basics II_2Q
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)
7/30/2019 HTML Basics II_2Q
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
7/30/2019 HTML Basics II_2Q
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.
7/30/2019 HTML Basics II_2Q
6/16
It also supports drop shadow effects.
Common Image File Types
7/30/2019 HTML Basics II_2Q
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".
7/30/2019 HTML Basics II_2Q
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
7/30/2019 HTML Basics II_2Q
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.
7/30/2019 HTML Basics II_2Q
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.
7/30/2019 HTML Basics II_2Q
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.
7/30/2019 HTML Basics II_2Q
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
7/30/2019 HTML Basics II_2Q
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
7/30/2019 HTML Basics II_2Q
14/16
7/30/2019 HTML Basics II_2Q
15/16
Horizontal line
NESTED TAGS
7/30/2019 HTML Basics II_2Q
16/16