Webdesign Reviewer

WEB DESIGN
HTML (Hyper Text Markup Language) HTML DOCUMENTS – must start with a document declaration <!DOCTYPE html>
- standard language in creating Web pages. HTML HEADINGS – defined with the <h1> to <h6>
- Consists of a series of elements - <h1> most important heading
- Represented by tags - <h2> least important heading
Tim Berners – Lee invented HTML HTML BASIC TAGS
HTML TAGS <p>…</p> - HTML paragraphs
<br> - beginning of the next line, empty element (without closing tag)
- element names surrounded by angle brackets. <hr> - horizontal line, empty element
- Not case sensitive (i,e. <H1>….<h1>) - non-breaking space or space character
<b>…</b> - bold
<tagname>…</tagname>
<i>…</i> - italic
<u>…</u> - underlined text
<sup>…</sup> - lift text and makes it smaller
Opening tag Closing tag (with forward slash -/-)
<sub>…</sub> - lowers text and makes it smaller
EDITORS – Web pages can be created and modified by HTML Editors <strike>…</strike> - strikes a line through text
Such as Notepad, Notepad++, Sublime, etc) <em>…</em> - makes text italic
WEB BROWSERS – read and display HTML documents <strong>…</strong> - makes text bold
STEPS IN CREATING WEB PAGE HTML elements can be “nested” (Elements can contain elements)
1. Create a folder “FIRST IN, LAST OUT” - mnemonic in writing nested html elements
2. Open Text Editor
( )– parenthesis or round brackets
3. Write the HTML codes
4. Save the html code and use the extension name .html and .htm { } – braces
5. View the HTML page in the web browser < > - angle brackets
HTML PAGE STRUCTURE
<html>
<head>
<title>Page title</title>
</head>
<body>
(Web Content)
</body>
</html>
TEXT FORMATTING LESSON 2:
<font>…</font> - specifies the font face, font size, and font color <img> - images , empty element as it contains attributes only
ATRRIBUTES of font tag: src – attribute specifies the URL (Uniform Resource Locator) of the image
a. Size – font size SYNTAX: <img src=”url”>

b. Color – font color
To insert an image, make sure the actual image is located inside your created folder
c. Face – Font face
➢ WebPage Folder
I,e. <font face=”arial” color=”red” size=”18”>sample</font>
➢ Images Folder
Lists – used to present information in an easy to read fashion. Image1.jpg
Image2.jpg
- Can be bulleted, numbered, or printed without bullets and numbers
Webpage1.html
Webpage2.html
TYPES OF LISTS
ATTRIBUTES
• <UL>…</UL> - unordered list (uses bullets)
▪ <ul type=”value”> Alt – alternative text for an image
Width – width of the image
Value: Circle, Square, Disc Height – height of the image
• <li>…</li> - lists items ➢ SYNTAX: <img src=”url” alt=”img description” wodth=”100px” height=”100px”>
Align – alignment either left or right
• <OL>…</OL> - ordered lists (uses numbers)
<center>…</center> - center the image and can be use between the <img> tag
▪ <ol type=”value”> ➢ I,e. <center> <img src=”url”></center>
Value: 1, A, a, i, I HTML BACKGROUND IMAGES
➢ <ol start=”3”> , start attribute: (ONLY applicable to ordered lists) To add background image on the webpage, USE the attribute style in the <body>
• <DL>…</DL> - definition lists (no numbers or bullets) tag, then add the background-image property.
✓ <dt>…</dt> - definition term ➢ SYNTAX: <body style=”background-image:url(images/bg1.jpg)”>

✓ <dd>…</dd> - definition description
For background color: <body style=”background-color: Blue;”>
<table>…</table> - tag for creating table in the web page HYPERTEXT REFERENCE (href) – destination or reference that the link refers to.
- Basically, this is where the user will be taken if they wish to click a link.
Elements of <table>…</table> tag:
Hypertext references can be:
▪ <tr>…</tr> - table row
▪ <th>…</th> - table header a. Global – links to other domains outside of your site h
o <a href=http://yahoo.com>Connect to Yahoo</a>
▪ <td>…</td> - table data/cell
b. Internal link – sends the browser to another section on the current page (Page
Jump)
Colspan – use to make a cell span more than one column , <th colspan=”2”>Column 2 & 3
o <a name=”linkname”>Text</a> *assign a name of a portion on your page
o <a name=”#linkname”>Text</a> *allows the browser to jump to the
Rowspan – use to make a cell span more than one row , <th rowspan=”2”>Col 1, row 1 & 2
section
c. Local link – Links to other pages within your domain
TABLE ATTRIBUTES o <a href=”filename.html”>Text</a> *jumps to other webpage of your
BORDER – size of the table border website
Cellpadding – use to create more white space between cell contents and its border FORMS
Cellspacing – use to increase distance between cells - vital tool for the webmaster to receive information from the web surfer.
- Take input from the viewer and depending on your needs
Colspan – combine two or more cells from different columns - <form>…</form> tag to create a form in the web page.
Rowspan - combine two or more cells from different rows INPUT FIELDS:
Width, Height – determine the width and height
Type – determine what kind of input field it will be. (text, submit, password, etc)
Style – access advanced custom properties <Style=”Background-Color:”Red”;>
Name – assigns a name to the given field
LESSON 3 Size – sets the horizontal width of the field. The unit of measurement is in blank spaces.
LINKS – most fundamental part of World Wide Web. It is the links that tie it all together Maxlength – maximum number of characters that can be entered
- Link to another web page or website anywhere in the world Placeholder – specifies a short hint
- Link to a different page within your own website (linking a page to a home page)
PAGE JUMP – jump from section to section within the same web page h
ANCHOR TAG - <a>…</a> - creates a link to another document.
- An anchor can point to any resource on the web: HTML page, image, sound file,
movie
INPUT FIELDS EXAMPLE:
HTML TEXT AREAS
- Input field for viewers to place their own comments
SAMPLE:
<textarea placeholder = “Comment Here…”></textarea>
LESSON 4:
CSS
- Cascading Style Sheet

- Style sheet language describes how HTML elements are to be displayed on screen
- Layout of HTML documents
CSS SYNTAX
- A CSS rule-consists of a selector and a declaration block
HTML DROP LISTS
- <select>…</select> list itself

- <option>…</option> available choice for the user
SAMPLE:
<select name=”gender”>
<option value=”Male”>Male</option>
<option value=”Female”>Female</option>
</select>
METHODS OF APPLYING CSS TO HTML DOCUMENT BACKGROUND ATTACHEDMENT – specifies whether background images should scroll or be
fixed.
1. In-line (attribute style)
*<body style=”background-color:#FF0000;”> BACKGROUND SHORTHAND
2. Internal (tag style)
*<style type:”text/css”> 1. Background-color
Body { 2. Background-image
Background-color:#FF0000, 3. Background-repeat
} 4. Background-attachment
</style> 5. Background-position
3. External link (link to a style sheet)
- A text file with the extension .css
- Link from the HTML document(default.html) to the style sheet (style.css) can be
created with one line of HTML code:
o <link rel=”stylesheet” type=”text/css”
Href=”style/style.css”>
- The line of code must be inserted in the header section of the HTML code.
o i.e. between the <head> and </head> tags
✓ One CSS file can be used to control the layout of many HTML documents
Colors are specified using predefined color names, RBG vales, or HEX values
o Color Values:
▪ Rgb (255, 0, 0) (RGB values)
▪ #FF0000 (hex values)
▪ Red (predefined color name)
BACKGROUND COLOR – set background color for HTML elements
TEXT COLOR – set the color for text
BORDER COLOR – set the color of borders for HTML elements
BACKGROUND IMAGE – specify an image to use as the background element
BACKGROUND REPEAT – repeat the background-image both horizontally and vertically
o (repeat-x, repeat-y, and no repeat)

Webdesign Reviewer

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Webdesign Reviewer

Uploaded by

Copyright:

Available Formats

WEB DESIGN

a. Size – font size SYNTAX: <img src=”url”>

✓ <dt>…</dt> - definition term ➢ SYNTAX: <body style=”background-image:url(images/bg1.jpg)”>

ANCHOR TAG - <a>…</a> - creates a link to another document.

HTML TEXT AREAS

- Input field for viewers to place their own comments

<textarea placeholder = “Comment Here…”></textarea>

- Cascading Style Sheet

- A CSS rule-consists of a selector and a declaration block

HTML DROP LISTS

- <select>…</select> list itself

BACKGROUND COLOR – set background color for HTML elements

TEXT COLOR – set the color for text

BORDER COLOR – set the color of borders for HTML elements

BACKGROUND IMAGE – specify an image to use as the background element

BACKGROUND REPEAT – repeat the background-image both horizontally and vertically

o (repeat-x, repeat-y, and no repeat)

You might also like