_ Yours Non-Technically: HTML Basics

HEAD TAGS

<title>	Puts a title on top of web page within the browser
<meta/> No separate closing tag	ensures page’s searchability by search engines

BODY HTML TAGS

<!-- html codes in here -->	Hides modern coding that old browsers can not read. If you don’t have these codes, the codes could actually appear within the webpage as text. Anything written within these tags do NOT appear on the browser. VERY useful for writing notes for a coder who maintains the site long after the site’s original creation.
<a>	links that carry us to ‘anchors’ – other sources of docs, etc …
<b>	Bold
<big>	enlarges font
<blockquote>	indents for quotations (like tab)
<br/> <br />	carries text behind the tag to next line without creating a space as does the paragraph tag
~~<center>~~	~~centre text. NB US spelling applies~~. SOON DEFUNCT. <div align=”center”>
<cite>	usually makes font italics
<div>	centre text. NB should be used in stead of soon to be defunct <center> tag
<dl> <dt> <dd> </dl>	Definition list. Term to be definite within <dt> goes against left margin. However, the definition <dd> is indented without bullets or numbers. This is ideal for creating lists that require no numbers or bullets. NB. No closing tags for <dt> and <dd>
<em>	Emphasizes text by applying italics
<embed>	to embed music (and other file types into webpage) to embed …. file types into webpage.
<font>	attributes: size=”10”/size=”2”/color/face/ 24px CK
<h1/2/3-6>	heading (sizes 1- 6)
<hr/> <hr />	horizontal rule (ie a horizontal line) that divides page
<i>	Italics
<img>	Image
<li>	to bullet point an item
<marquee>	to move words across screen attributes: direction=”left/right/” behavior=”scroll/slide/alternate” loop=”4”
<ol><li></li></ol>	to order list (ie to number items that are listed), to indent list
<p>	paragraph – creates line space BEFORE and AFTER the paragraph
<strike>	strike through
<s>	strike through
<strong>	Bold. Unlike <b> tag, this tag tells search engines that the content is important. It should therefore be used for keywords.
<sub>	Subscript
<sup>	Superscript
<tt>	font that is “type text”. Looks like type writer print.
<u>	Underline
<ul><li></li></ul>	to unorder list (ie to list the items without numbering or lettering them); bullet points will be used instead

full justification

Justify content centrally

<a download="" href="www.url.com" title="">Download File</a>

Enter the hyperlink of the PDF file webpage

BROWSER FUNCTIONS

F5	Refreshes the screen on your Windows-based browser

ATTRIBUTES (these will be qualified by a value)

<tag attribute=”value”>

<tag attribute1=”value” attribute2=”value” attribute3=”value”>

Align

Ex. <div align=”left/right/center”>

Ex <p align=”left/right/center”>

Ex <h3 align="left/right/center">

Backgrounds

Ex. <Body bgcolor=”green”>

Color

Ex. <font color=”blue”>

Face (ie font type)

Ex. <font color=”arial”>

Width

SRC for Images, music

<img src="file:///users/sidneyambris/desktop/img_8541.jpg" width="500" height="300" /> NB ‘src’ is asking for a URL value.

Buttons

<button type="button">Click Me!</button> (NB the button could be embedded with mailto, URL or other links)

NB. When you are closing a tag that has attributes, you do NOT need to place the attributes in the closing tag. Ex </font> is sufficient to close the opening tag <font size=”10”>

NOT HTML but useful

Character	Description	Name string	Numeric string
&	Ampersand	&	&
©	Copyright	©	¨
"	Quotation	"	"
>	Greater than	>	>
<	Less than	<	<
¢	Cent	¢	¢
£	Sterling pound	£	£
°	Degree sign	°	°
®	Trademark sign	®	®
±	Plus/minus signs	±	±
×	Multiply sign		×
÷	Divide sign		÷
¦	Broken vertical bar	¦	¦
§	Section sign	§	§
¹	Superscript 1	¹	¹
²	Superscript 2	²	²
³	Superscript 3	³	³
½	1/2 fraction	½	½
¼	1/4 fraction	¼	¼
¾	3/4 fraction	¾	·
Æ	Capital AE	Æ	Æ
Æ	Small AE	æ	æ
É	Capital E accented	É	É
É	Small e accented	é
É	Small e accented	é	é
	No Break Space gives 1 space
	No Break Space gives 2 spaces, etc …

&# 205;

&# 237;

€

BODY - GROUPS OF TAGS & ATTRIBUTES

<body text=”blue”> Color of the text (Only color, no other characteristic)

<body background=”photo.jpg”> Whole background is photo

<body bgproperties="fixed"> Photo is fixed in place while text scrolls over it

<body link=”blue”> Links appear this color before use. Unvisited links

<body alink=”blue”> Active links appear this color while clicking it

<body vlink=”purple”> Link changes to this col once pg already Visited

LISTS - GROUPS OF TAGS, ATTRIBUTES, ETC

<ol start=”2”> start at the 2^nd character (example b,B,ii,II,2), whatever the order type (alphabet, numbers, etc)

Definition Lists

These are a form of unordered list. The term to be defined is close to the margin. On the following line, the definition will hang, ie it will start a little farther away from the margin. NB there are no close tags for the definition term and definition.

<dl>

<dt> France

<dd> A European country

<dt> vacation

<dd> A period during which there is a break from something

that had been done previously and usually considered

work.

</dl>

NB. You can use only the <dd> to indent text consistently.

IMAGES - GROUPS OF TAGS, ATTRIBUTES, ETC

src = source

<img src=”portrait.jpg”> src is MANDATORY

<img alt= “Abc’s logo”> Inside empty box if photo fails to unload, ‘Abc’s logo’. NB Search engines pick up this text.

<img src=”portrait.jpg” vspace=”2”> blank vertical spaces above & below

<img src=”portrait.jpg” hspace=”2”> blank horiz spaces left & right

<img src=”portrait.jpg” align=”top/middle/bottom/left/right”> img relative to text

<img border="100"> black border width in pixels

<img width=”70%” height=”20”> width of photo relative to browser window (vs pixels)

NB. Use pixels (ie “px” versus absolute or % measurements to control the size of photos relative to the text that you have. Nb the catamaran in the (table of) ‘contents’ frame of my Barbados promotional website assignment. Prior to using pixels, I could not get the photo to line up with the words, etc .... Since using px, I never had a problem even after changing computers.

<img title=”this appears only with Firefox” …..

---no closing tag---

SOUNDS

<bgsound src="1234usmc.wav" loop="-1">	Loop=”1,2,….,-1” -1 means indefinitely

LINKS -

General

TAGS	ATTRIBUTES	USE
<A> </A>
	<A TITLE="See how to live your best life">Oprah’s site </A>	Short description appears when the mouse hovers over the link

Links to other web pages

TAGS	ATTRIBUTES	USE
<A> </A>
	<A HREF="http://www.oprah.com">Oprah’s site </A>	Link appearance: Oprah’s site Opens other webpage
	<A HREF="abc.html" target = "_blank">Go to other page</A>	Opens to other page in a new window (while leaving the current one open in the background)
	<A HREF=”abc.html”> For Full Photograph </A>	Opens to full photo. However, in that HTML doc, the image should be the only contents within its body.

Links to other parts of the same page

There are steps to creating such links. You must create a name for the target (known as “an anchor”) and then create the link to that target.

TAGS	ATTRIBUTES	USE
<A> </A>
	<a name=”top”></a>	Write this code in the target location. This establishes the target location, ie the “anchor”
	<a href=”#top”>Back to Top </a>	Write this code in the origin location (ie the location of the clickable link). This creates a clickable link to the anchor’s location
	<a href="www.domain.com/page.html#top"> Top of page 1</a>	Links to a specific point (ie “an anchor”) within another web page. The target has the anchor tag <a name=”guy”></a>

Links to Email addresses

TAGS

ATTRIBUTES

USE

HREF=”mailto:me@domain.com”> Email me now!</a>

Creates empty self-addressed email

HREF ="mailto:me@gmail.com?subject=Order&body=Please send the product:">

Creates self-addressed email with pre-set subject line and pre-filled body

Result:

To: Subject:	me@gmail.com Order
Please send me the product

Relative Links (within same website)

TAGS	ATTRIBUTES	USE
EBLOCK/sidney EBLOCK/EO6/casey.html EBLOCK/EO6/john.html EBLOCK/EO5/jerry.html
<A> </A>
	<A HREF=”../Sidney.html”> Sidney’s page</A>	To go to the webpage named ‘Sidney’ from the original location named ‘Casey’. Everytime you exit a directory, use ../

FONT –

<font></font>

	Attribute	Value
<font>	Face	Arial Monotype Corsiva

COLORS -

If you see favourite colors in Word, etc … and want to apply them to hexadecimal, you must convert from ‘decimal’ (the numbering system 0-9) to ‘binary’ to ‘hexadecimal’. There are various sites that do the 2 conversions at once:

http://www.mathsisfun.com/binary-decimal-hexadecimal-converter.html

Also, Photoshop’s color palette spells out the color at the bottom when you drag the cursor over the spectrum of colors.

Color		Color Name	Hexadecimal Value	Color	Color Name	Hexadecimal Value
	Black		#000000		Green	#008000
	Silver		#c0c0c0		Lime	#00ff00
	Gray		#808080		Olive	#808000
	White		#ffffff		Yellow	#ffff00
	Maroon		#800000		Navy	#000080
	Red		#ff0000		Blue	#0000ff
	Purple		#800080		Teal	#008080
	Fushia/Magenta		#ff00ff		Aqua/cyan	#00ffff

SPEED UPLOADING CONSIDERATIONS

Time Delays in Loading Pages:

Speed of loading videos is as follows:

Youtube link	fastest
embedding
Place video within html doc	slowest

TABLES -

TAGS

<table> to embody a table

<tr> table row: to create row (info that appears vertically)

<td> table data: to enter information inside of columns

<th> column heading (use this instead of <td>)

<caption> Caption that describes the table’s contents

Ex.

<table>

<tr>

<td></td>

</tr>

</table>

ATTRIBUTES & OTHER FEATURES

Background photo (in tiles)

<table bgcolor=”blue”>

Whole table background color

Whole row background color

Single cell background color

To determine whether the caption will be above/below

To create space w.in cells. So contents are suspended in the center vertically and horizontally

To make the cells exist w.out touching each other

<td colspan=”2/3/4/….”

NOT FOR WORDS THAT MAY WRAP. USE WIDTH ATTRIBUTE FOR WORDS THAT MAY WRAP.

To make the column span over multiple columns.

This has a 2 column span
A	b

Nb for the above, you MUST delete content that would have been in the 2^nd column. Like this:

<table>

<tr>

<td colspan=”2”>This is a 2 column span

</td>

Here is left blank. Do NOT enter the <td></td> tags when there should be no conent

</tr>

<tr>

<td >a

</td>

<td >b

</td>

</tr>

</table>

<table bordercolor=”red”

<td width=”800”

Use if you have tables with different columns that contain enough words that can span far enough that may wrap. NB colspan only will not stop words from spanning entire screen’s width. So specify width by using pixels. Specify for each column.

<TD>

</TD>

To insert a photo within a table’s cell

Don’t enter percentages on tables too much since the table will become squeezed when someone adjusts the window’s dimensions.

MOVING PARTS

ELEMENTS

There are different types of tag.

Block - Nothing else will be on the line with the affected text because these tags include automatic line breaks that isolate the text into a block. Ex. <hr/>, <p> <h1>, etc

Inline Elements – are tags that can continue with other text before and after without a special automatic line break of a whole space. Ex: <i>, <sup>, etc

List Item - Elements that support providing a list of items. List item elements are a type of block level element.

_ Yours Non-Technically

Sunday, July 17, 2016

HTML Basics - Reference

No comments:

Post a Comment