HTML Attributes and Styles, Slides of Computer Programming

Download HTML Attributes and Styles and more Slides Computer Programming in PDF only on Docsity!

1

HTML Attributes

HTML Attributes

▪ All HTML elements can have^ attributes.

▪ Attributes provide^ additional information^ about an element.

▪ Attributes are always specified in^ the start tag.

▪ Attributes usually come in^ name/value pairs^ like:^ name="value".

▪ The title attribute can be written with^ uppercase or lowercase

like Title and/or TITLE.

HTML Attributes

▪ The href Attribute

• HTML links are defined with the **** tag. The link address is specified in the href attribute: This is a link
• “ a ” stands for Anchor and “ href ” stands for Hypertext Reference.
• As with any HTML tag it is very important to close the tag. If you forget to close your anchor tag, the rest of your document will appear as a hyperlink. ▪ Size Attributes
• HTML images are defined with the **** tag.
• The filename of the source ( src ), and the size of the image ( width and height ) are all provided as attributes :

HTML Attributes

▪ The alt Attribute

• The alt attribute specifies an alternative text to be used, when an image cannot be displayed.
• The value of the attribute can be read by screen readers. This way, someone "listening" to the webpage, e.g. a blind person, can "hear" the element.

You will learn more about images, links and the tag later in this tutorial.

What is the tag?

The tag defines metadata about an HTML document. Metadata is data

(information) about data.

tags always go inside the element, and are typically used to

specify character set, page description, keywords, author of the document, and

viewport settings.

Metadata will not be displayed on the page, but is machine parsable.

Metadata is used by browsers (how to display content or reload page), search

engines (keywords), and other web services.

There is a method to let web designers take control over the viewport (the user's

visible area of a web page), through the tag

Attribute Value Description charset character_set Specifies the character encoding for the HTML document content text Specifies the value associated with the http-equiv or name attribute http-equiv content-security-policy content-type default-style refresh Provides an HTTP header for the information/value of the content attribute name application-name author description generator keywords viewport Specifies a name for the metadata

Extra: Setting the Viewport The viewport is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen. You should include the following **** element in all your web pages:

This gives the browser instructions on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

What if I need to make sure my

code was written correctly?

W3C has an HTML code validation service where you can paste your code and make sure it is error free!

HTML Styles

16

HTML Styles

▪ Setting the style of an HTML element, can be done with the^ style attribute.

▪ The HTML style attribute has the following^ syntax :

▪ Examples:

• (^) Use background-color for background color.
• (^) Use color for text colors.
• (^) Use font-family for text fonts.
• (^) Use font-size for text sizes.
• (^) Use text-align for text alignment.

HTML Styles

▪ HTML Text Color

• The color property defines the text color for an HTML element: HTML Text Displayed in Browser

This is a heading <p>This is a paragraph.</p> **This is a heading** This is a paragraph. 

HTML Styles

▪ HTML Fonts

• The font-family property defines the font to be used for an HTML element: HTML Text Displayed in Browser

This is a heading

This is a paragraph.

**This is a heading** This is a paragraph.