|
| Thread: HTML Programming. Easy or hard to learn? | |
|
william
Responsible
Undefeatable Hero
LummoxLewis
|
posted May 08, 2006 11:20 AM |
|
Edited by william at 11:36, 08 May 2006.
|
HTML Programming. Easy or hard to learn?
Do you think that HTML programming is easy or hard to learn.
Well here are some of the basic things that you need to know about HTML Programming.
HTML stands for Hypertext Markup Language.
HTML files are basically special text files:
* Contain special control sequences or tags that control how text is to be formatted.
* HTML files are the ``source code'' for Web Browsers
o A browser reads the HTML file and
o Tries to display it using the tags to control layout.
Tags exist to control various display items:
* Titles
* Heading Levels
* Styles of font (e.g Bold, Italic)
* Lists and list items
* Hypertext links to other URLs and files.
Page- Refers to a single HTML file. Sometimes referred to as a document
Home page- Refers to a designated entry point for access to a local web
Hot spot- A region of displayed hypertext that, when selected, links the user to another location
web- A set of hypertext pages considered to be a single work
Web or WWW- the union of all hypertext on all Web servers worldwide
Every HTML document consists of two elements:
* Head elements -- provides page title and general page formatting commands
* Body elements -- put the main HTML text in this part.
All HTML commands or tags have the following form:
<name_of_tag>...</name_of_tag>
Tags control the structure, formatting and hypertext linking or HTML pages.
Tags are made active by <name_of_tag> and must be made inactive by an associated </name_of_tag>.
HTML is not case sensitive -- tags can be upper or lower case letters (even mixtures of cases).
Note that these specify the basic anatomy of every HTML page.
<html>
<head>
head elements go here
</head>
<body>
body elements go here
</body>
</html>
* <html> is the first tag of any HTML page. It indicates that the contents of the page is in HTML.
Head Elements
* Marks properties of entire document
* Marked with <head>
* Includes title <title> tag
* Ended with </head>
Body Elements
* Marked with <body>
* Header levels <h1>, <h2>, <h3>, etc.
* Anchors <a href= "http://www.cs.cf.ac.uk²>Link text</a>
* Paragraph indicators <p>
* Line breaks <br>
* Horizontal line <hr>
* Address tags <address>|
* Blockquote style <blockquote>
Within a body text may be organised in variety of ways:
Lists
* Unordered <ul> with <li> (list item)
* Ordered <ol> with <li>
* Definition <dl> with <dt> and <dd>
* Menu <menu> with <li>|
* Short <dir> with <li>|
Preformatted text
* <pre>
Character formatting (physical)
* Bold <b>
* Italics <i>
* Underline <u>
* Fixed width <tt>
Character formatting (logical)
* Strong <strong>
* Variable name <var>
* Citation <cite>
Graphics
* In-line images <img src=³image.gif²>
* Include alt=³ ³ for browsers that can¹t display graphics, e.g.
<img src=³image.gif² alt=³Image GIF²>
Entities
* Character strings that represent special symbols, e.g.
* & for ``&``
* > for ``>``
* " for double quote (``)
Bare-bones example of HTML
<html>
<head>
<title> The simplest HTML example
</title>
</head>
<body>
<h1> This is an HTML Page </h1>
</body>
</html>
Figure:Simplest HTML page
<html>
<head>
<title> Another simple HTML example
</title>
</head>
<body>
<h1> This is a level-one heading </h1>
Welcome to the world of HTML.
<p>
This is one paragraph.
</p>
<p>
This is a second paragraph.
</p>
</body>
</html>
Head elements
* <head>....</head> tag delimits head part of document.
* <title>....</title> Defines the title of the Web page.
* Ever Web page should have a title
o Displayed as Title of Netscape Window
o Used in Bookmarks or Hot lists to identify page
o Make title succinct but meaningful
o Only one title per page
o Only plain text in title (no other tags).
o Other head items will be met later.
The Body Element
* <body>....</body> tag delimits body part of document.
* All other commands that constitute web page nested inside body.
* Body must follow head.
Paragraphs
* <p> ....</p> tag delimts a paragraph.
* HTML ignores most carriage returns in a file.
* Text is wrapped until a <p> or </p> encountered.
o HTML assumes that is a <p> is encounterd before a </p> then a paragraph should be inserted.
* Paragraphs can be aligned -- LEFT, CENTER, RIGHT - with the ALIGN attribute via
<p align=center>
<p align>
<!-- THIS IS A COMMENT -->
<!-- Default alignement is left -->
Left aligned paragraph
</p>
<p align = center>
Center aligned paragraph
</p>
<p align = right>
right aligned paragraph
</p>
Which looks like this when viewed through a browser:
Left aligned paragraph
____________________Center aligned paragraph _____________________
____________________________________________right aligned paragraph
Linking to Other Documents
Regions of text can be linked to other documents via the <a> tag which has the following format:
<a href=``filename_or_URL''> link text </a>
* The opening <a> tag has a href attribute that is used to specify the link to URL or local file.
* Text between the <a> and </a> (closing tag) is highlighted by the browser to indicate the hyperlink.
There are different types of links.
For example:
My <a href="index.html">Internet
Computing home page</a>
using a relative link.
My <a href="/Dave/Internet/index.html">
Internet Computing home page</a>
using an absolute link.
My <a href="
http://www.cs.cf.ac.uk/Dave/
Internet/index.html">Internet Computing
home page</a> using an remote link.
They all link to same web page but in a different way:
My Internet Computing home page using a relative link.
My Internet Computing home page using an absolute link.
My Internet Computing home page using an remote link.
Relative, Absolute and remote Links
There is a subtle and very important between the links in the previous example:
Relative links
refer to a page that exists in the current directory that he browser points to.
* sub-directories and included files can be specified in the relative link.
* Makes for very portable web pages. Whole directory systems can be moved easily.
Absolute links
reference files based on the absolute location on the local file system.
* absolute links always begin with a /
Remote links
reference files based on the absolute location on complete URL.
* Files on local disks may be accessed via the file IPtype in the URL. E.g. file://Maclab/Internet/Netscape/index.html
Anchors
Anchors are special places within documents that can be linked to.
* Anchors are created anywhere in a document with
<a name = "anchor_name">Anchor Position</a>
* Anchors within the same document are referred to by
<a href = "#anchor_name">Go to anchor</a>
* Anchors in the external document are referred to by
<a href = "link#anchor_name">
where link may a relative, absolute or remote URL link.
Therefore given this page of Html
We will Jump back here soon
<a name = "top_anchor"> We will Jump back here soon</a>
Some HTML CODE
<h2>A Header</h2>
<p> A Paragraph .............
...........<br>
...........<br>
...........<br>
...........<br>
</p>
<p> A Paragraph or two.............
...........<br>
...........<br>
...........<br>
...........<br>
</p>
<a href =#top_anchor>Click here to go back to top_anchor anchor</a>
which looks like this in HTML
Some HTML CODE
A Header
A Paragraph ............. ...........
...........
...........
...........
A Paragraph or two............. ...........
...........
...........
...........
Click here to go back to top_anchor anchor
Unordered or Bulleted lists
* <ul> ... </ul> delimits list.
* <li> indicates list items. No closing </li> is required.
For Example:
<ul>
<li> apples.
<li> bananas.
</ul>
Which looks like this when viewed through a browser:
* apples.
* bananas.
Ordered or Numbered lists
* <ul> ... </ul> delimits list.
* <li> indicates list items. No closing </li> is required.
For Example
<ol>
<li> apples.
<li> bananas.
</ol>
1. apples.
2. bananas.
Glossary or Definition Lists
* <dl> ... </dl> delimits list.
* Each list item has two parts: a term and a definition.
* <dt> indicates the term in the list item, <dd> indicates the definition. No closing </dt>, </dd> is required.
For Example:
<dl>
<dt> apples <dd> A fruit usually green
and/or red.
<dt> bananas <dd> A yellow fruit.
</dl>
which when viewed in browser looks like:
apples
A fruit usually green and/or red.
bananas
A yellow fruit.
Nesting Lists
Lists of the same or different type may be nested in any number of ways. For Example:
<ul>
<li> Some fruit:
<ul>
<li> bananas.
</ul>
<li> Some more fruit
<ul>
<li> oranges.
</ul>
</ul>
which when viewed in browser looks like:
* Some fruit:
o bananas.
* Some more fruit
o oranges.
Preformatted Text
The <PRE> tag generates text in a fixed width font and causes spaces, new lines and tabs to be significant. Often used for program listings.
Example:
<pre>
This is preformatted text.
New lines, spaces etc. are
significant.
</pre>
which when viewed in browser looks like:
This is preformatted text.
New lines, spaces etc. are
significant.
In-Line Images
Most browsers can display in-line images that are in JPEG or GIF format. Use the img tag with src attribute to include an image in you HTML page:
<img src=image_link>
where image_link is the the relative, absolute or remote URL link of the image file.
Example:
<p align = center>
An image mixed in with text <br>
<img src="Images/gromit.gif" align=middle
alt="wallace and gromit">
</p>
Which looks like this when viewed from a browser:
An image mixed in with text
wallace and gromit
In-line Image and Text
* Include alt=``replacement'' attribute for browsers that can't display graphics.
Things to remember when HTML programming
* Make sure < and > match up
* Make sure <tag> and </tag> match up
* Not all browsers display information the same way
o Netscape is most advanced
o Lynx displays no graphics
* Relative vs. Absolute links
o If your html document is top.html and you refer to another document in the same directory, you need only specify the file name and not the entire path
Yeah well that about sums it up for any of you html Programming people and people that want t know html programming.
If you wanted to know where I got this information from just click this link below:
Basic HTML Programming
Thanks for reading this 
____________
~Ticking away the moments that
make up a dull day, Fritter and
waste the hours in an off-hand
way~
|
|
Arangar
Famous Hero
Weak ranger - lost viking
|
|
posted May 08, 2006 12:25 PM |
|
|
HTML Programming. Easy or hard to learn?
Easy to learn. Easy or hard to master?
Oh wait, this isn't a word game is it?
____________
Arangar
Norwegian viking
ranger of the north
|
|
william
Responsible
Undefeatable Hero
LummoxLewis
|
|
posted May 08, 2006 12:26 PM |
|
|
No it isnt a word game hahaha 
Seriously do you think it is easy or hard to learn?
____________
~Ticking away the moments that
make up a dull day, Fritter and
waste the hours in an off-hand
way~
|
|
friendofgunnar
Honorable
Legendary Hero
able to speed up time
|
|
posted May 08, 2006 06:31 PM |
|
|
HAH!!
I told you William had a future writing software manuals.
Was I right, was I right, or was I right?
William your post is a tedious mess. Write it in the form of a tutorial. I've been putting off learning HTML for the longest time and so I will be coming back here to actually look at it. If there's anything that's not clear I'm going to come right through the screen and strangle you.
heh heh jes kiddin'
|
|
Lord_Woock
Honorable
Undefeatable Hero
Daddy Cool with a $90 smile
|
|
posted May 08, 2006 08:04 PM |
|
|
|
HTML is not programming. So there.
|
|
Gnoll_Mage
Responsible
Supreme Hero
|
|
posted May 10, 2006 08:26 PM |
|
|
No? What, because it doesn't really perform any functions etc like Javascript would? I guess I agree there then.
Quote:
All HTML commands or tags have the following form:
<name_of_tag>...</name_of_tag>
No they don't:
<img src="scvsdf.img" />
doesn't need to be closed like that.
In fact <br> etc should have that ending slash too.
____________
|
|
Lord_Pc
Promising
Famous Hero
Groin-Grabingly Clever
|
|
posted May 11, 2006 10:04 AM |
|
|
if you go to the link at the end of the first post you will see its copy pasted
____________
Da-da-dada-HEY-dada-da-da
Two goldfish were in their tank. One turns to the other and says, 'You man the guns, I'll drive.'
|
|
Arangar
Famous Hero
Weak ranger - lost viking
|
|
posted May 11, 2006 11:11 AM |
|
|
Google is your friend
Try a tutorial instead-> easy to learn, easy to master.
Google: Easy to learn. Easy to master?
____________
Arangar
Norwegian viking
ranger of the north
|
|
Binabik
Responsible
Legendary Hero
|
|
posted May 11, 2006 07:54 PM |
|
|
Quote:
HTML is not programming. So there.
Yea, what he said.
I'll go one step further. Machine code is the only real programming language. Anything else is for woosies.
MOV other_side, thread
____________
|
|
c0ldshadow
Known Hero
ig chr0meice91
|
|
posted May 12, 2006 05:09 AM |
|
|
html is incredibly easy to learn if you ask me. in 8th grade i learned html pretty much entirely; i'm 21 now.
tables are about as hard as it gets in html, and they are very easy if you ask me. forms and buttons can be slightly intimidating at first possibly. frames can be a bit tedious but they aren't used often.
css is much more intricate than html and can be used to do pretty much everything you do with html. it is definatley more of a challenge to learn than html, by far, since there are so many more options with it.
i design my websites by using raw html/css in notepad. i always make sure my code validates in http://validator.w3.org. dreamweaver/frontpage can be very helpful but i believe anyone who uses these programs should have a complete knowledge of html, and basic knowledge of css, before using them.
my website is http://deeptide.com if anyone is bored and wants to check it out. mainly for selling software i have made and some c++ source code/etc.
____________
|
|
|
|
