Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Saturday, 1 November 2014

Lesson no 4 = HTML Styles

HTML Styling

Every HTML element has a default style (background color is white, text color is black, text-size is 12px ...)
Changing the default style of an HTML element, can be done with the style attribute.
This example changes the default background color from white to light grey:

Example of Styling in HTML


<!DOCTYPE html>
<html>
<body>

<h2 style="color:red">I am Red</h2>
<h2 style="color:blue">I am Blue</h2>

</body>
</html>

OutPut:

I am Red

I am Blue


The HTML Style Attribute

The HTML style attribute has the following syntax:
style="property:value"

HTML Text Fonts

The font-family property defines the font to be used for an HTML element:

Example:

<!DOCTYPE html>
<html>
<body>

<h1 style="font-family:verdana">
This is a heading</h1>

<p style="font-family:courier">
This is a paragraph.</p>

</body>
</html>

Output:

This is a heading

This is a paragraph.

HTML Text Size

The font-size property defines the text size to be used for an HTML element:

Example:

<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:300%">
This is a heading 34</h1>

<p style="font-size:160%">
This is a paragraph 11.</p>

</body>
</html>

Output:

This is a heading 34

This is a paragraph 11.

HTML Text Alignment

The text-align property defines the horizontal text alignment for an HTML element:

Example:

<!DOCTYPE html>
<html>
<body>

<h1 style="text-align:center">
Centered heading here</h1>

<p>This is a paragraph for testing.</p>

</body>
</html>

Out Put:

Centered heading here

This is a paragraph for testing.

Lesson no 4 = Text and Paragraphs in HTML

Text and Paragraphs in HTML

HTML-Text

Text is the backbone of any web page. It plays an double role; it provides content for web surfers to enjoy as they skim through articles and articles of information, but it also gives Search Engines and Spiders keywords and meta data. It is because of text on web pages that we have a network of seemingly endless information available at our fingers.


HTML Paragraphs

The HTML <p> element defines a paragraph.

<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph 1.</p>
<p>This is a paragraph 2.</p>
<p>This is a paragraph 3.</p>

</body>
</html>


OutPut:

This is a paragraph 1.
This is a paragraph 2.
This is a paragraph 3.

Lesson no 3 = HTML Headings

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.


The six different HTML headings:


  1. <h1>This is a heading</h1>
  2. <h2>This is a heading</h2>
  3. <h3>This is a heading</h3>
  4. <h4>This is heading 4</h4>
  5. <h5>This is heading 5</h5>
  6. <h6>This is heading 6</h6>



Write This code in note pad and save as heading.html and view the results.


<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>

</html>

The result output of HTML Code is like this .


This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

Lesson no 2 = HTML Editors

HTML Editors:

Writing HTML Using Notepad or Text Edit
HTML can be edited by using a professional HTML editor like:
  1. Adobe Dreamweaver
  2. Simple Node Pad
  3. Note Pad ++
  4. Microsoft Expression Web
  5. Coffee Cup HTML Editor


However, for learning HTML we recommend a text editor like Notepad (PC) or Text Edit (Mac). We believe using a simple text editor is a good way to learn HTML.

Lesson no 1 = HTML Tags and Elements

HTML Tags and Elements


HTML markup tags are usually called HTML tags


  1. HTML tags are keywords (tag names) surrounded by angle brackets like <html>
  2. HTML tags normally come in pairs like <b> and </b>
  3. The first tag in a pair is the start tag, the second tag is the end tag
  4. The end tag is written like the start tag, with a forward slash before the tag name
  5. Start and end tags are also called opening tags and closing tags.

HTML Elements

"HTML tags" and "HTML elements" are often used to describe the same thing.

But strictly speaking, an HTML element is everything between the start tag and the end tag, including the tags:

HTML Element:


<p>This is a paragraph.</p>

HTML Element Code:
<html>
</html>
Now save your file by selecting - Menu and then Save. Click on the Save as Type drop down box and select the option All Files. When you're asked to name your file, name it - index.html. Double-check that you did everything correctly and then press - Save. Now open your file in a new web browser so that you have the ability to refresh the page and see any new changes.
If you opened up your index.html document, you should be staring at your very first blank (white) web page!

html - <head> element

The <head> is usually the first element contained inside the <html> element. While it is also an element container that encapsulates other HTML elements, these elements are not directly displayed by a web browser. Instead they function behind the scenes, providing more descriptive information about the HTML document, like its page title and other meta data. Other elements used for scripting (JavaScript) and formatting (CSS) are also contained within the <head> element, and we will eventually introduce how to utilize those languages. For now, the head element will continue to lay empty except for the title element, which will be introduced next.
Here's a sample of the initial setup.
HTML Head Element Code:
<html>
  <head>
  </head>
</html>
If you've made the code changes and refreshed the browser page, you will notice that we still have nothing happening on the page. So far, all we've done is add a couple of necessary elements that describe the web page document to the web browser. Content -- the stuff you can see -- will come next!
html - <title> element
The <title> element adds a title to a web page. Web page titles are displayed at the top of any browser window or at the top of browser tabs. They are probably the first thing seen by web surfers as pages are loaded, and web pages you bookmark are saved using the web pages' titles.
A proper title makes a good first impression, and any page caught without a title is considered unprofessional, at best.

HTML Title Element Code:

<html>
  <head>
    <title>My Web Page!</title>
  </head>
</html>
Save the file and refresh the browser. You should see "My Web Page!" in the upper-left bar of your browser window.
Name your webpage as you please. Just keep in mind that the best titles are brief and descriptive.
html - <body> element
The element that encapsulates all the visual elements (paragraphs, pictures, tables, etc.) of a web page is the <body> element. We will be looking at each of these elements in greater detail as the tutorial progresses, but for now, it's only important to understand that the body element is one of the four critical web page elements, and it contains all of the page's view able content.

HTML Body Element Code:

<html>
  <head>
    <title>My Web Page!</title>
  </head>
  <body>
    <p>Once upon a time...</p>
  </body>
</html>
Go ahead and view your first complete web page.

HTML - elements reviewed

To recap quickly: we've laid out a set of four essential elements that are used to create a strong foundation and structure for your web page. The <html> element encapsulates all page content and elements, including two special elements: the <head> and <body> elements. The <head> element is a smaller container for elements that work behind the scenes of web pages, while the <body> element houses content elements such as web forms, text, images, and web video.
From here on out, the examples we provide will assume that you have a firm understanding of these key elements and know to place the majority of your HTML code inside of the <body> element.

HTML Element Syntax


  1. An HTML element starts with a start tag / opening tag
  2. An HTML element ends with an end tag / closing tag
  3. The element content is everything between the start and the end tag
  4. Some HTML elements have empty content
  5. Empty elements are closed in the start tag
  6. Most HTML elements can have attributes

HTML Introduction

What is HTML?

H-T-M-L are initials that stand for HyperText Markup Language (computer people love initials and acronyms -- you'll be talking acronyms ASAP). Let me break it down for you:


  • Hyper is the opposite of linear. It used to be that computer programs had to move in a linear fashion. This before this, this before this, and so on. HTML does not hold to that pattern and allows the person viewing the World Wide Web page to go anywhere, any time they want.
  • Text is what you will use. Real, honest to goodness English letters.
  • Mark up is what you will do. You will write in plain English and then mark up what you wrote. More to come on that in the next Primer.



  • Language because they needed something that started with "L" to finish HTML and Hypertext Markup Louie didn't flow correctly. Because it's a language, really -- but the language is plain English.

    Beginning to Write HTML

    You will actually begin to write HTML starting with Primer #2. That's tomorrow if you follow the seven-day plan this was written for. Here, I want to tell you how you will go about the process.
    You will write the HTML document on the word processor, or Notepad, WordPad, or Simple Text. When you are finished creating the HTML document, you'll then open the document in a browser, like Netscape Navigator. The browser will interpret the HTML commands for you and display the Web page.
    Now, some people who are already schooled in HTML are going to jump up and down and yell that you should be using an HTML assistant program because it makes it easier. That's true, but it also makes it harder to learn as the program does half the work for you. Take my word for it, use the word processor for a week, then go to the assistant if you still want to use one. You'll be far better off for the effort. I have been writing HTML for six years and I still use Notepad for the bulk of my writing.

    Let's get into the programs you will use to write your HTML document. Keep this in mind: HTML documents must be text only. When you save an HTML document, you must save only the text, nothing else.
    The reason I am pushing Note Pad, Word Pad, and Simple Text is that they save in text-only format without your doing any additional work. They just do it. But, if you're like me, then you will want to start writing on a word processor, like WORD, or Word Perfect. Maybe you're just more comfortable on it. If so, read this next part carefully.
    The Word Processor
    When you write to the word processor you will need to follow a few steps:
    1. Write the page as you would any other document.
    2. When you go to save the document (Here's the trick), ALWAYS choose SAVE AS.
    3. When the SAVE AS box pops up, you will need to save the page in a specific format. Look at the SAVE AS dialogue box when it pops up: Usually at the bottom, you find where you will be able to change the file format.
    4. If you have a PC, save your document as ASCII TEXT DOS or just TEXT. Either one will work.
    5. If you have a MAC, save your document as TEXT.
    6. When I started writing HTML, I saved pages by assigning every Web page its own floppy disc. It just helped me keep it all straight, but if you want to save right to your hard drive, do it. I only offer the floppy disc premise as a suggestion.
    Please remember: It is very important to choose SAVE AS EVERY time you save your document. If you don't, the program won't save as TEXT, but rather in its default format. In layman's terms -- use SAVE AS or screw up your document.
    You see, when you save your document in WORD, or some other word processor format other than text, you are saving much more than just the letters on the page. You're saving the margin settings, the tab settings, specific fonts, and a whole lot of other settings the page needs to be displayed correctly. You don't want all of that. You just want the text.
    Note Pad, Word Pad, and Simple Text already save in text-only format so if you use one of them as your word processor, you'll get the correct format simply by saving your document.

    How To Name Your Document
    What you name your document is very important. You must first give your document a name and then add a suffix to it. That's the way everything works in HTML. You give a name and then a suffix.
    Follow this format to name your document:
    1. Choose a name. Anything. If you have a PC not running Windows 95, you are limited to eight letters, however.
    2. Add a suffix. For all HTML documents, you will add either ".htm" or ".html".
    (".htm" for PCs running Windows 3.x and ".html" for MAC and Windows 95/98 Machines)
    Example:
    I am looking to name a document I just wrote on a PC running Windows 3.11 for work groups. I want to name the document "fred". Thus the document must be named "fred.htm". If it was MAC or Windows 95/98 I would name it "fred.html". Please notice the dot (period) before .htm and .html. And no quotation marks, I just put them in here to set the name apart.
    Uhhhhhh.... Why Do I Do That?
    Glad you asked. It's a thing called "association." It's how computers tell different file types apart. ".html" tells the computer that this file is an HTML document. When we get into graphics, you'll see a different suffix. All files used on the Web will follow the format of "name.suffix." Always.
    Okay, why .htm for PCs running Windows 3.x and .html for MAC and Windows 95/98?
    Because that's the way the operating systems are made (Windows 3.x, Windows 95/98, and MAC OS are all technically called operating systems). Windows 3.x only allows three letters after the dot. MAC OS and Windows 95/98 allow four, or more. Your browser allows for both suffixes. It acts upon .html and .htm in the same fashion.

    Why do you keep harping on the fact that I must save in TEXT only?
    You're just full of questions! You see, HTML browsers can only read text. Look at your keyboard. See the letters and numbers and little signs like % and @ and *? There are 128 in all (read upper- and lowercase letters as two). That's text. That's what the browser reads. It simply doesn't understand anything else.
    If you'd like to test this theory, then go ahead and create an HTML document and save it in WORD. Then try and open it in your browser. Nothing will happen. Go ahead and try it. You won't hurt anything.
    Remember that if you are using Notepad, Wordpad, or Simple Text, the document will be saved as text with no extra prompting. Just choose SAVE.

    Opening the Document in the Browser
    Once you have your HTML document on the floppy disc or your hard drive, you'll need to open it up in the browser. It's easy enough. Since you're using a browser to look at this Primer, follow along.
    1. Under the FILE menu at the very top left of this screen, you'll find OPEN, OPEN FILE, OPEN DOCUMENT, or words to that effect.
    2. Click on it. Some browsers give you the dialogue box that allows you to find your document right away. Internet Explorer, and later versions of Netscape Navigator, require you to click on a BROWSE button or OPEN FILE button to get the dialogue box. When the dialogue box opens up, switch to the A:\ drive (or the floppy disc for MAC users) and open your document. If you saved the file to your hard drive, get it from there.
    3. You might have to then click an OK button. The browser will do the rest.

    One More Thing

    You easily have enough to keep you occupied for the first day. Don't worry, the Primers get less wordy after this.
    If you are going to start writing HTML, I suggest you make a point of learning to look at other authors' HTML pages. You say you're already doing that, right? Maybe. What I mean is for you to look at the HTML document a person wrote to present the page you are looking at. Don't look at the pretty page, look behind it at the HTML document.

    Why Would I Do That?

    Because you can... but seriously, folks. Let's say you run into a page that has a really neat layout, or a fancy text pattern, or a strange grouping of pictures. You'd like to know how to do it.
    Well, look, I'm not telling you to steal anything, but let's be honest, if you see some landscaping you like, you're going to use the idea. If you see a room layout you like, you will use the idea to help yourself. That's the point of looking at another page's HTML document. I think it's also the best way to learn HTML. In fact, I am self-taught in HTML simply by looking at others' documents. It was the long way around, believe me. You're going to have a much easier time of it with these Primers.
    Here's how you look at an HTML document (known as the "source code"):
    1. When you find a page you like, click on VIEW at the top of the screen.
    2. Choose DOCUMENT SOURCE from the menu. Sometimes it only reads SOURCE.
    3. The HTML document will appear on the screen.
    4. Go ahead. Try it with this page. Click on VIEW and then choose the SOURCE.
    It's going to look like chicken-scratch right now, but by the end of the week, it'll be readable and you'll be able to find exactly how a certain HTML presentation was performed.

    It's A Little Different On AOL

    Those of you who use AOL can also see the source. You can do it by placing your pointer on the page, off of an image, and clicking the right mouse button. MAC users should click and hold. A small menu should pop up. One of the items will allow you the ability to view the source.
    That's the Primer for today. Print it out if you'd like and get ready to delve in and write your first HTML document. See you tomorrow.
  •