Scribd
Upload
603 views

HTML Basics II - 2Q

HTML tags can be divided into two types: container tags that wrap around content and empty tags that stand alone. Attributes are modifiers that provide additional information about HTML elements, such as font, color, size, and alignment. Common ways to include images specify the image's source URL, dimensions, and alternative text for accessibility. Images should generally be less than 90 pixels and maintained at the proper ratio and scale for web display. HTML also allows formatting of text through various font attributes and the use of the horizontal rule and nested tags.

Uploaded by

perlishell74
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
603 views

HTML Basics II - 2Q

HTML tags can be divided into two types: container tags that wrap around content and empty tags that stand alone. Attributes are modifiers that provide additional information about HTML elements, such as font, color, size, and alignment. Common ways to include images specify the image's source URL, dimensions, and alternative text for accessibility. Images should generally be less than 90 pixels and maintained at the proper ratio and scale for web display. HTML also allows formatting of text through various font attributes and the use of the horizontal rule and nested tags.

Uploaded by

perlishell74
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 16

HTML BASICS II

Types of tags
Container tags

Empty tags

The container tag always wraps around text or graphics and comes in a set with an opening and a closing: The html tags are container tags <html> opening tag </html> 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 <br> is one that adds a line break

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 namevalue pairs, separated by "=", and are written within the start tag of an element, after the element's name: <tag attribute="value">(content to be modified by the tag)</tag>

Common attributes
Attributes

Examples

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

Inserting Images

Images are a staple of any web designer, so it is very important that you understand how to use them properly. In order to place an image onto a website, one needs to know where the image file is located within the file tree of the web server

the URL (Uniform Resource Locator).

The source attribute (src) is what makes an image tag display an image. An image source is a URL value and should point to the directory location an image file. <img src of = filename.jpg>

Common Image File Types

It also supports drop shadow effects.

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 an attribute, 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".

IMAGE ELEMENTS PARAMETERS


When choosing the resolution size for the graphics for web display, it will be easier for any web 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

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: <img src = filename.jpg alt=mypicture> 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 web browser. 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 web browser.

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.

<img src= filename.jpg width=100 height= 140>

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.

Images can be aligned horizontally to the right or to the left of other elements using the align attribute. Image elements are aligned to the left by default. <img src= filename.jpg align=right>

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?


0123456789abcdef

<body bgcolor = #cc0000>

FONT

The <font> 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.

<font size=5> I am Calibri </font>

Horizontal line <hr> NESTED TAGS

You might also like