HTML Ch 3

अब Quizwiz के साथ अपने होमवर्क और परीक्षाओं को एस करें!

Image tag

<img> is an empty HTML tag to add an image to a webpage. It does not have an ending tag.

Relative Link examples

<a href="index.html">Home</a> &nbsp; &nbsp; <a href="about.html">About Us</a> &nbsp; &nbsp;

height and width attribute example

<img src="logo.png" alt="Company logo" height="125" width="200">

Email links

EX: <a href="mailto:[email protected]">[email protected]</a> the second [email protected] will marked as a link on the site

Image Links

Relative Image link example: <a href="index.html"><img src="image.png"></a> (all on the same line quizlet just made it move down a line)

id

a div attribute which identifies a unique area on a webpage and distinguishes it from other page divisions. <div id="menu"> id attribute has a value of menu no other div element on the webpage can have an id attribute value of menu

unordered list

also called BULLETED list. displays a small graphic called a bullet before each item of information. In this list the items can appear in any sequence. <ul> <li> First item</li> <li>Second item</li> </ul> Would appear as bullet first item bullet second item

ordered list

also called NUMBERED list. displays information in a series using numbers or letters. Works well when order matters such as a sequence of steps. <ol> <li> First item</li> <li> Second item </li> </ol>

Webpage can have a fixed layout or fluid layout

also called flexible or responsive layout. A webpage with fixed layout does not change when the broswer window is resized or the page is displayed at varying resolutions. Every element has a predefined height and width. Fluid images adjust for optimal display

src

attribute included in image tag that is required. It identifies the image file being inserted. EX: <img src="logo.png"> this tells the browser to display the image file named logo.png

href or hypertext refrence

attribute included with starting anchor tag <a> to identify the webpage, email address, number, or other content to access. EX: <a href="index.html">Home</a> without href it would not create a hyperlink Home would be the text marked as a link

class

attribute that is also commenly used in HTML. unlike id, class can be applied to more than one div or other HTML element on the page. Ex: <p class="first"> this defines that paragraph as first <img class="product"> class has a value of product, you could use this to collect all product photos in a single catagory

default hyperlink color

blue, changes to purple when clicked on.

Pixel

comes from the term picture element. the smallest element of light or color on a device displaying images. arranged in rows and columns but so small you cant see. 200X200 pixels is a height of 200 and width of 200

description list

contains terms and descriptions. Use it to create a glossary or to list questions and answers. it includes terms and descriptions or defintions.

<dl>

description list

Unordered list bullet options

disc (DEFAULT, just the regular bullet) square circle

dt

for each item on the dl a dt element must come before the dd element: <dl> <dt>First term</dt> <dd>First definition</dd> <dt>Second term</dt> <dd>Second definition-part 1</dd> <dd>Second definition-part 2</dd> </dl>

Absolute Links

hyperlinks that link to other webpages outside of your website. EX: <a href="http://www.cenage.com">Cengage</a> The Cenage would be the text marked as a link

Relative links

hyperlinks that link to other webpages within the same website EX: <a href="template/fitness.html">Fitness Template</a>

JPG or JPEG Joint photograpghic experts group

large file size. standard file format for a digital photo such as one taken with a digital camera. 24 bit image that supports 16.7 million colors uses lossy compression use for: digital photos

Telephone links

link to a phone number. EX: <a href="tel:+18005552356">Call us Today at 800-555-2356</a>

Lossy compression

made exclusively for digital photos, to reduce a file it discards some of the color information in the image which reduces its original quality

Text links, or hypertext links

most common type of hyperlink EX: about us links to the about us page

Images

must consider file format, image dimensions, and file size

File size

number of bytes a file contains KB thousands of bytes MB millions GB billions

Ordered list options

numbers, letters, or roman numerals, both upper and lower case(A, a, I,i.)

optimize

optimizing an image reduces its file size and load time. To optimize you can crop, modify dimensions, adjust quality, or convert image file format. Too much compression can degrade image quality

Heading elements

provide a title or heading before a paragraph or text or section of a page. Appear in larger fonts. run from level 1(most important to 6(least important) Heading level 1 is major heading 2-6 is subheadings

Div element q

purpose is to contain all of the other webpage elements including header,nav,main, and footer div id="container" this div element will contain all of the webpage elements. reffered to as container or wrapper because it contains or wraps around all of the webpage elements.

GIF Graphics Interchange Format

small file size oldest web file format and supports transparency and frame animation. To compress an image or reduce file size GIF uses lossless compression. 8 bit images that can display up to 256 colors. good for icons and line drawings but not high-quality pics Use for: line drawings replaced by PNG

PNG portable network graphics

small file size pronounced "ping" was designed to replace GIF. Also uses lossless compression and supports 8 bit color images and 16 bit grayscale images and 24 bit true color images. PNG advantage over GIF- PNG24 can support over 16 million colors, PNG also supports transparency but not animation. PNG is still not ideal for photographs use for: images that are not digital photos

alt

specifies alternative text to display when an image is being loaded, espicially useful for screen readers which translate info on computer screen into audio output, should describe the purpose of the image in 50 characters or less <img src="logo.png" alt="Company logo">

Div

starts after starting body tag (with container)and ends after close footer tag(no container)

lossless compression

technique for reducing file size that maintians the files color information

link

text, image or other webpage content that visitors tap or click to instruct the browser to go to a location file or to request a file from a server. On the web links are the primary way to navigate among webpages and websites.

images with large file size

use a photo editor

Anchor Element

used to create a hyperlink on a webpage. Begins with an <a> tag and ends with </a> tag. called an anchor because you can use it to anchor content to text or an object on a webpage

div elements

used to define an area or a division in a webpage. div elements have attributes that provide more meaningful information about the element.

SVG Scalable Vector Graphics

uses markup language to create two-dimensional graphics, images, and animations. royalty free graphic format. latest edition is version 1.1 Use SVG to create shapes. Only modern browswers can display these graphics and no broswers support all graphics. graphics are created with code so no file use for: shapes lines texts and gradients

hyperlink image

will have a border around it to indicate its a link, border is blue and then turns purple when viewed

Contact page example

you would do <main> <h2> Ready to get started? Contact us.</h2> </main> Page 121 of text*


संबंधित स्टडी सेट्स

Final Review Questions for NR222 Health & Wellness

View Set

Chapter 21: Informatics and Health Care Technologies

View Set

Marketing 351: ch 21 Setting Prices

View Set

electrical 1 module 3 trade terms

View Set