HTML Ch 3
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> <a href="about.html">About Us</a>
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*
