TermPaperWarehouse.com - Free Term Papers, Essays and Research Documents

The Research Paper Factory

Free Essay

Html

In:

Submitted By fizomegh004
Words 5471
Pages 22
How To Create
Your First Web Page This HTML Tutorial is about how to create your first Web page by coding HTML using a text editor (such as NotePad) and then viewing the document using your Web browser.To begin a Web page you will open a simple text editor like Windows NotePad for the Windows operating system or SimpleText for the Macintosh. Once you have this simple text editor open to a new blank document you will begin your web document by typing a few items I shall discuss in a moment. When you reach the closing part of this file I will ask you to save it to a floppy disk with a filename of firstpage.html. This is discussed below, in the section titled Saving the File. The method of opening the file using your Web browser is discussed in the section titled Open and View the File. Let's begin. The first thing you are to type in the text editor work area is a left angle bracket, < the letters HTML, and the right angle bracket, >. The symbols and letters should look like this: <HTML><HTML> is the opening for any HTML Web Page. HTML stands for HyperText Markup Language. By having coded the <HTML> the browser will know which language it is to handle. What is HTML? is an article containing additional information about HTML. A lot of information of your own preference is placed into a coded document. The term document refers to what is being coded and typed in the text editor. The term page refers to what the browser displays for the viewer or what you see in your browser window when your browser has opened your coded document. Try not to confuse the two terms. Think of the document as what is being coded and saved as a .html file and page refer to the Web page seen by the user from the Web browser window. When it eventually comes time to end your document, the last thing that should be coded is the closing </HTML>. Notice the forward slash this time in front of the HTML letters. The forward slash precedes letters to close HTML "tags". Many elements have a beginning tag and an ending tag. The only difference between the two is that the ending tag has a slash right after the left angle bracket, <. So far what you have coded looks like this: <HTML> </HTML>Nothing should actually be visible yet in the browser window until later when more HTML "tags" have been added. The Head SectionAfter opening your document with <HTML> you will need to touch the Enter key to begin a new line and code <HEAD>. <HEAD> begins the HEAD section of the document, a part of the document above the BODY. The <HEAD> section contains a lot of information and a title but not the information nor the title which will appear on your actual Web page. No, the <HEAD> section contains information for search engines and document-finding, elements called META tags, which you will learn about much later. So, getting back to the basics, I want to begin another new line after you have coded the <HEAD>. The new line should be <TITLE>My First Web Page</TITLE>.(This is not the title that will be seen on your page but rather is the title which will be used by search "spiders", "robots", search engines. You can read more about search engines on the Searching the Internet page.) Begin a new line. Code </HEAD>. This closes the HEAD section. So far, (before anything has appeared on your Web "page", your first Web document looks like this: <HTML>
<HEAD>
<TITLE>My First Page</TITLE>
</HEAD>

</HTML> Do you see how the HEAD element begins and ends inside the shell of the beginning and ending HTML element. This is important: In any Web document the title (beginning and ending title tags and the information in between) is nested between the beginning and ending HEAD tags. Also, the HEAD section is nested between the beginning and ending HTML tags. The HEAD section is opened and closed before you can open the BODY section. It is the BODY section where "everything happens" that you view on a Web page. All of the coding is called a Web document and only what is actually viewed is called a Web page. Now that the </HEAD> has already been coded, let's move on to the BODY section. The Body SectionSimilar to the HTML element having an opening and a closing, and the HEAD element having an opening and a closing, so too does the BODY element have an opening and a closing. It is coded like this: <BODY> </BODY>Whatever you now code into your document, (inside the shell of the body element) will be viewed on your Web page. So far your total coding in the text editor looks like this:<HTML>
<HEAD>
<TITLE>My First Page</TITLE>
</HEAD>
<BODY> </BODY>
</HTML> Students new to HTML will often put the tags in the wrong order. To overcome this problem, I created the "HTML Snow/Penguin" to help me remember the order of the tags when I first took an HTML class. Here is my HTML Snow/Penguin:
The above blue coding is the completed HTML document template. Every HTML page you create will come from this basic outline or template. Remember that the Document title (which is not viewed) goes in the HEAD section. It is for the search engines and spiders so your page can be indexed. Notice that I left some space between <BODY> and </BODY>. I just happen to like a little bit of extra space to work in when I am coding in the body section of any Web document. I might point out now that this "open space" between coded lines in HTML will not have open lines on the viewed page because the browser converts all "white space" into a single space. In other words, I could double-space or triple-space all of my lines of coding but the browser will not show double-spacing nor triple-spacing. The extra spaces that you create with the space bar or the Enter key are "ignored" by the browser, EXCEPT for one single space. It is NOT TRUE that the browser "ignores white space in the document" or allthewordswouldruntogether. So you see, the browser is honoring one empty white space between words. I cannot get two or three spaces between words unless I code one extra non-breaking space, &nbsp; for each space extra I want. Let's put something inside the BODY section so that you can view it with your browser. Making A TitleA title (in the BODY section) for your first Web page is coded like this:<H1>My First Web Page</H1>If the title is too simple in the example for your liking just substitue a title of your own -- I just used this as an example. Here, take a peek at what it would look like in a regular Web page the way it is currently coded. I would really like to have the title centered. I could do this in one of two ways. The older HTML 3.2 specification allows the use of <CENTER> before the title and before the <H1>. After the title and after the </H1> you would then close the </CENTER>
Here is the code: <HTML>
<HEAD>
<TITLE>My First Web Page</TITLE>
</HEAD>
<BODY>
<CENTER><H1>My First Web Page</H1></CENTER>

</BODY>
</HTML> Take a look at the new example #2 with the title now centered. The newer technologies of HTML 4.0 require that you do NOT use the <CENTER></CENTER> tags but use <DIV ALIGN="center"> and </DIV> in place of the centering pair of "tags". (See code below):<HTML>
<HEAD>
<TITLE>My First Web Page</TITLE>
</HEAD>
<BODY>
<DIV ALIGN="center"><H1>My First Web Page</H1></DIV>

</BODY>
</HTML> Whether your code is single spaced or double-spaced or has any extra space at all does NOT matter because the browser ignores any extra spacing within the coded HTML document. I often place extra space between paragraphs or between page sections that I am coding within the document just so that my code will be easier to read and to edit when I come back to it later. Now you have learned that the use of <CENTER> with </CENTER> is the older way to center text in an HTML document and that the same result will be obtained by using the newer <DIV ALIGN="center"> with </DIV>. <note: browser versions="" (of="" netscapte="" navigator="" and="" internet="" explorer)="" older="" than="" 4.0="" will="" not="" support="" the="" newer="" centering="" method="" but="" i="" use="" this="" nonetheless="" by="" way="" of="" thinking="" that="" browsers="" are="" now="" being="" replaced="" versions.="" <="" div=""> Making A Background ColorNow let's make a background color for your page. This is something new because now you are going to have to type an attribute inside the BODY element and you will give the attribute a value. It sounds difficult but I will explain it a step at a time. An attribute is just something additional than enhances the way the browser views an element. Color Charts of RGB values

Note:
When I use the term "HTML element" I am referring to the sum of the opening "tag", the contents of the page between the opening and closing "tag" and the actual closing "tag" itself. "Tag" is just a slang expression used my many HTML coders to refer to what's between the angle brackets: < >. A "paragraph element" begins with <P>, has content, and ends with </P>. The BODY element began with <BODY>. Using your text editor, place the blinking cursor (I-beam) between the Y and the right angle bracket. Space once and type BGCOLOR="" then allow the right angle bracket to close this attribute for BACKGROUND COLOR. You used double quotes, I hope. Between the double quotes you will place either an accepted named color, such as red, white, blue, green, yellow, goldenrod, cornsilk, etc. OR you will have to look up some RGB Color Values for HTML Authors values which each begin with an octothorp (#). Find a color you like from one of these Color Charts of RGB Color Values for now. When your typing of that BODY tag is completed and has a color value such as <BODY BGCOLOR="cornsilk"> or <BODY BGCOLOR="#FF6342">, you will need to save the file changes in your text editior, File,Save. When you return to the browser you will need to either click on Refresh or Reload to "renew" the browser window to show the new changes you made in the Editor program. Once you renew the browser window, you should now see your page with a background color. I made a page with a "cornsilk" background to show you. Click here to see it. I coded <BODY BGCOLOR="cornsilk">. You will want to use the RGB Hexidecimal Color Values when you get particular about wanting a certain specific color on your web page. Free background texturesSaving The FileWhen you are through typing code into your simple text editor such as NotePad or SimpleText, save the file by selecting Save As and naming the file firstpage.html. Before selecting a location to save this file to, be sure to change the text selection under the file name to the setting that says "All Files". You will need to put .html at the end of the filename such as naming it firstpage.html. Select a location such as a floppy disk on the A: drive. Do NOT SAVE as text but select ALL files. Again, Click on File in NotePad or another simple text editor. Select SaveAs. (Once the file has been initially saved the very first time, do not use SaveAs anymore, but use File, Save for all subsequent saving. You should also save your work about every 5 minutes to prevent any unexpected data loses from power problems.)
BEFORE clicking on OK to save the file, be sure the first time it is saved that you change the text setting (line under the file name in the SaveAs dialog box of the Windows 95/98 Operating System) to "All Files". You will be saving this as All Files so you have to include the .html extension as part of your filename. Select a location to save it to such as the A:\ floppy disk. Now Click on OK to save it. Once it is saved, close the file. Open And View The FileNow open your browser window while you are not on-line. Click on File, Open. Select Browse. Select the A: drive or the location where you saved your firstpage.html file. Double click on it or select open. (Let your browser open the file.) When done correctly you should be able to view the title of your first web page. Note:
An alternate and easier way to open the file for viewing by the browser is just to double click on the filename from Windows Explorer. Windows Explorer will automatically open a browser to view the document you just saved. If you did not close that document after saving it you will get an error when you try to open it in the browser window. Once your Web page appears in the Internet Explorer browser window you can edit it by selecting View, Source from the browser menu bar. I caution you that you cannot edit a file when online and the file is being delivered to your browser from a Web server. You can only edit files on your own computer such as from the floppy disk. Save any changes to your document and switch back to the browser to click on either REFRESH or RELOAD before your changes will be visible. Only the first time you saved this file did you use SaveAs. When you can see your title in the browser window, I want you to try to click on View, then Source in order to see the text editor coding of your HTML document. When you type something new into this NotePad and SimpleText file (the simple text editor file), you are to select File, Save for each subsequent change or addition to your code. If you only have two files open, your browser and the simple text file, you may use the shortcut of Alt + Tab to toggle back and forth between the browser window and the text editor coding. In order to see typed coding changes after you have saved the changes with File, Save you will need to toggle back with ALT + tab (windows users) and in the browser menu bar, select Refresh or the Reload option in order to refresh the browser window. Without refreshing or reloading the window, your saved changes will not be seen. Once you begin coding your HTML document, you will SAVE and REFRESH or RELOAD after each change, to see how the change looks. All of this is done off-line using your browser in the off-line mode. You do not need to be on the Internet to write HTML documents and to view them. The next lesson about formatting text is quite a bit easier. </note: browser> |
Lesson 2: Headings and Special Effects
HTML Tutorial If you are new to this HTML tutorial and did not read the previous HTML tutorials, I talked about making a Web document (coding HTML) using a text editor.
Examples of text editors are NotePad (for Windows), SimpleText(for Mac), EditPlus(for Windows), BBEdit(for Mac),and Vim for Linux.
Amaya, free from the World Wide Web Consortium is an Editor/Browser.Changing Sizes of Titles and Making Paragraphs,
Special Effects, and Line Breaks This section is really a fun part of learning about HTML 3.2. Text properties you can control include the text color, the text size within the constraints of <H1> through <H6>, and the face which is the font type. The largest heading size (without using style sheets) is the H1 heading coded this way:<H1>Very Large </H1> It begins with the <H1> "tag" and ends with the </H1> "tag". Essentially the beginning and the ending looks just the same except the ending "tag" has the forward slash in front of it. This will pretty much be the rule with the forward slash in front of all ending "tags" in HTML coding. I hate the word "tag" since the H1 heading is really considered to be an "element". But you see, the "element" is made up of all of the parts, the beginning "tag" and the ending "tag" and the text in between is all grouped together and called the H1 "element". The H2 heading is coded: <H2>This is an H2 Heading</H2> This is an H3 Heading: <H3>This is an H3 Heading</H3> Sometimes you will want to put a line break into a heading so that part of your heading continues on the next row. The line break is done by coding <BR>. There is no closing "tag" required for a line break. Remember that with headings you must use the closing "tag" that looks like the opening "tag" but has the forward slash in front of it. The opening "tag" for the H4 heading is <H4> and the closing "tag" for the H4 heading is </H4>. It looks like this:<H4>This is the H4 heading<BR> with a break in the middle</H4>Anytime you want to force the browser to make a line break just code <BR>. This can be done with all text formatting, not just in headings, but in paragraphs and table cells as well. More About the <BR> TagThe <BR> line break tag will not appear on the Web page but the result of the <BR> tag will be seen as a line break. Does that make sense? The "tag" <BR> itself will not be seen.
You do not have to hit the Enter key for a line return just because you coded a forced line break. White space in the Web document where you code is empty white space which does not appear on the actual Web page. Only when you code the <BR> tag, will the line of text actually halt and begin anew on the next line. Without this tag, typing word-wraps inside whatever "container" (like a table cell) the text is being coded within. In the document, a line break can occur anywhere but in order to force a line to break where you want to on the Web page you should code the <BR> tag. If you work with tables of a specific width any text placed into a <TD></TD> element pair will be constrained by the width of the column or the table cell, depending upon how you code your table. You will get to understand this better when studying about HTML tables.Beginning and Ending A Paragraph, Boldface, Underline, <EM>, and Italic TextA paragraph begins with <P> and ends with </P>. To make certain text appear bold use the <B> to make text bold and</B> to turn off the boldface type. The <EM> will emphasize type and </EM> will turn off the emphasis. If your type is already a boldface these effects will not increase the amount of boldface (character width or darkness). You may turn on and off underlining text with the <U>underlining tags</U>. Lastly, you may use the <I>italic effect</I>.Teletype Text with <TT>, Subscripts and Superscripts<TT>Teletyped text is monospaced. This text is useful for formatting money in dollars and cents so the decimal "lines-up" in the table you use.</TT>
To make characters subscripted or superscripted use the <SUB></SUB> or the <SUP></SUP> such as coding H<SUB>2</SUB>0 to write H20.
To write exponents use the <SUP></SUP> "tags", such as before and after the 4 in this next example: 24=16. In other words, just code:
2<SUP>4</SUP>=16.<CITE>, <BLINK>, <BIG>,
<SMALL>, and <BASEFONT>If you are citing a particular reference or book use the <CITE></CITE> element ("tags" and content) such as:
The following information was found in the <CITE>San Francisco Chronicle</CITE> newspaper.
Avoid special effects like the <BLINK> tags which are proprietary rather than multiplatform. <BIG> increases the font to the next larger size and <SMALL> decreases font size.
The <BASEFONT> tag will allow you to set the font size that the browser will use to render the normal document text. Size is the only attribute of the <BASEFONT> tag. Turn it off before using a <FONT> tag. When you are working in NotePad or a different text editor program and are coding HTML code, it does not matter a bit about "white space" in the coded document because the browser will ignore any extra "white space" in your typing. The browser will not put that extra "white space" onto your Web page. What will be on the Web page is the browser's interpretation of how that page should be rendered (interpreted) based on certain HTML elements ("tags") that you have coded.Other Factors Affecting HTML Text and TitlesBesides pure HTML code affecting HTML Text and HTML Titles the styling technology of Cascading Style Sheets (CSS) will also affect how your Web page looks... Purists believe that the HTML tags should only be responsible for content while any styling such as size of font, color of font and even spacing, line-height and layering should be done using Cascading Style Sheets rules. To say Cascading Style Sheets rules is not a grammatical error but the technology itself is called Cascading Style Sheets. In Review, take a look at relative sizes of these headings:H1H2H3H4H5H6Ultimately, the Web Author who is familiar with and is using Cascading Style Sheets rules will be able to control the color and the size of the Heading element content from either external or internal style sheets or from inline style rules. See Introduction to Cascading Style Sheets |
HTML: Formatting Text, Lesson 3 by Cheryl Gribble Formatting Text Size, Color and Font FaceHTML lacks a lot of font styles and characteristics that a lot of text editors have. You cannot format a Web document using HTML as nicely as you could format a page with a word processing program. What you can do with HTML is to specify certain font sizes (1 through 7), select a color from an RGB Color Reference and vary your text colors on your page without a graphics program. You may also select a font-family or specify whether you want serif or sans-serif font face. If the font that you select is not on the users computer when they are viewing your Web page, their browser will select its own default font to replace your selection so you must know that your choice with HTML will not be etched into stone but will vary from one computer or browser type to another. Size 7 abcdefg...
Size 6 abcdefg...
Size 5 abcdefg...
Size 4 abcdefg...
Size 3 abcdefg...
Size 2 abcdefg...
Size 1 abcdefg...The first line above was coded like this:
<FONT SIZE="7" COLOR="red">Size 7 abcdefg...</FONT> The size 6 line was coded this way:
<FONT SIZE="6" COLOR="orange">Size 6 abcdefg...</FONT> The smallest line above was coded as follows:
<FONT SIZE="1" COLOR="black">Size 1 abcdefg...</FONT>You can also change font sizes by specifying + or - numbers, as in <FONT SIZE =+1>This is one size larger</FONT> than this.<FONT SIZE=-1>This is one size smaller.</FONT>
This method will not work if you use a size 7 already and try to go a size larger. You are still constrained by sizes 1 to 7 although if you are using a size 3 then you could certainly use a +2, a +3, or a +4 to increase your font size as in
<FONT SIZE=+4>VERY BIG</FONT>More examples of font size, but with Cascading Style SheetsA Word About Font C O L O R !COLOR is an attribute of the FONT tag.
<FONT COLOR="red">changes the text to red</FONT> The equivalent RGB color value which represents "red" is #FF0000. You could have also achieved red text by coding
<FONT COLOR="#FF0000">red text</FONT>. The color attribute value of "red" and the color attribute value of "#FF0000" achieved the same results. The value of "#FF0000" is called an RGB color value and the number is always 6 digits, often called a "hexadecimal color value", or "hex value" for short. RGB stands for Red-Green-Blue. While not all colors have names, certainly all colors do have their own specific hexidecimal value (RGB color value). I look up the numbers I need from online references such as color charts. I also need to mention that when you place either a named color or a value of color (preceded by #), that these values should be coded into parentheses.
For example COLOR="#FF0000" or COLOR="red". The named color is in quotes and does NOT use the octothorp, #. The RGB color value MUST use the octothorp, # before the number containing 6 digits. Both the octothorp and the 6 number are together inside one set of quotes. I downloadeded a free trial version of a color selector utility from http://www.tucows.com/. I use a program called WinZip from http://www.winzip.com/ to unzip or open the files after I had downloaded the software. These compression programs have a help feature and many have little teaching lessons with them to help you get started.Hitmill.com has 5 pages now with RGB Hexidecimal color values for Web authors. The index to the color pages is available at http://www.hitmill.com/html/rgbcolorvalues.html. Place the font size property along with the color property into only one set of font "tags" making up the font element.
<FONT SIZE="5" COLOR="#FF00FF">This is the result of coding both the size and the color property.</FONT>
Note: I just put in the font tags on purpose to illustrate the coding. The actual markup characters do not appear on the Web page but only appear in the HTML document (the coding area). The Web page is the viewing area of the browser and it what the user sees on his own machine but the Web document is what you see when you are coding to create a Web page. The actual typing and coding is not the Web page. When the document is interpreted by the browser and displayed, it is now a Web page. Try not to confuse the HTML document and the Web page. Think of the Web page as being the result of what a browser does with an HTML document. Each time you code changes of any kind in your HTML document be sure to do a File, Save. When you switch back to your browser to view your changes you will not see the changes unless you REFRESH or RELOAD the page from the browser menu. If your page suddenly has disappeared it is usually from a simple mistake of having an "open" tag somewhere either missing the closing slash or missing the left or the right angle bracket </ >. When you learn later about how to code cascading stylesheets just a missing --> before the end of the </STYLE> will sometimes cause the entire Web page not to view. Keep in mind that the browser is very unforgiving about any coding "typos" or "omissions". If your Web page suddenly does not view properly then look for an error in one of the coded markup "tags" before checking elsewhere.A Word About Font FaceThe FONT element ("tags" and contents between the "tags") has a FACE attribute which allows you to select a font face whereever you would like to do so within the document, even if it is inside a table cell. The major browsers will render your selected font face onto your Web page only if that particular font face is a font already installed on your computer system. If the font face which is named is not available you may specify an alternate font face to use by putting a comma and a space between your first and second selections and you may also specify a general family of font such as script, serif, sans-serif. Here is an example of specifying a font face:
<FONT FACE="Tahoma, sans-serif">This is Tahoma font face, or sans-serif if Tahoma is not available.</FONT>
<FONT FACE="Times New Roman, serif">Times New Roman font face, or serif </FONT>
<FONT FACE="Comic Sans MS, script" SIZE="5">Comic Sans MS font face, or a default script font face </FONT>
The font faces do not really become that noticeable on a Web page until the size is appreciably increased as for a title or subtitle. I will illustrate with the H4 title size:Times New RomanComic Sans MS, or default scriptScriptTahoma or default sans-serifArialCursiveSpecial Note:
When your Web page is published, or uploaded to the Web server, any font face that you specified will show as intended only if that is a font also available on the user's (surfer on the Internet) computer. If their computer does not have a font installed that you specified, it will go to your second choice font, or a "default" font, if you specified a general font group such as sans-serif. If you did not specify more than one choice and the user does not have that font, your page element font face will default to the default font face of the user's computer. It is beneficial to you as the Web author to select a first choice of font face, a second choice, and a general group.Now that you have completed this over-view of the FONT element you can practice combining various combinations of size, color and face. HTML books will have additional information about formatting text and fonts. If you should happen to begin using a stylesheet whether it is an external stylesheet or an internal one do not also use FONT elements. Once you graduate to stylesheets you will need to delete the <FONT></FONT> sprinkled throughout your HTML document.Note: When consulting a straight HTML reference book, look for the term FONT or FONT FACE in the index. Later when you study formatting with the CSS rules (Cascading Style Sheets) the terminology changes to font-family. Additional information is available in the Introduction to Cascading Style Sheets (CSS). |

Similar Documents

Free Essay

Html

...HTML About the tutorial Tutorial HTML Tutorial Simply Easy Learning 2 HTML Tutorial About the tutorial HTML Tutorial HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to develop web pages. HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first standard HTML specification which was published in 1995. HTML 4.01 was a major version of HTML and it was published in late 1999. Though HTML 4.01 version is widely used but currently we are having HTML-5 version which is an extension to HTML 4.01, and this version was published in 2012. Audience This tutorial is designed for the aspiring Web Designers and Developers with a need to understand the HTML in enough detail along with its simple overview, and practical examples. This tutorial will give you enough ingredients to start with HTML from where you can take yourself at higher level of expertise. Prerequisites Before proceeding with this tutorial you should have a basic working knowledge with Windows or Linux operating system, additionally you must be familiar with:      Experience with any text editor like notepad, notepad++, or Editplus etc. How to create directories and files on your computer. How to navigate through different directories. How to type content in a file and save them on a computer. Understanding about images in different formats like JPEG, PNG format. Copyright & Disclaimer Notice All the content...

Words: 5524 - Pages: 23

Premium Essay

Html

...HTML Beginner's Guide htmldog.com This HTML Beginner's Guide assumes that you have no previous knowledge of HTML or CSS. It should be quite easy to follow if you work through each step, which are all brought together at the end, before moving on to the CSS Beginner's Guide. The thing to keep in mind is that HTML and CSS are all about separating the content (HTML) and the presentation (CSS). HTML is nothing more than fancy structured content and the formatting of that content will come later when we tackle CSS. If you have looked at other HTML tutorials, you may find that they mention certain things that HTML Dog does not. This is because many methods are obsolete, non-standard or just plain bad practice. Getting into the frame of mind of doing things the RIGHT way from the start will turn in to much better results in the end. Getting Started Most of the stuff on the web is no different than the stuff on your computer it's just a whole load of files sorted into a whole load of directories. HTML files are nothing more than simple text files, so to start writing in HTML, you need nothing more than a simple text editor. Notepad is a common example (on Windows this is usually found under the Programs > Accessories menu). Type this in to your text editor: This is my first web page Now create a folder called 'html' and save the file as 'myfirstpage.html' (it is important that the extension '.html' be specified - some text editors, such as Notepad, will automatically save it as...

Words: 2252 - Pages: 10

Free Essay

Html

...Introduction to HTML What is an HTML File? • HTML stands for Hyper Text Markup Language • An HTML file is a text file containing small markup tags • The markup tags tell the Web browser how to display the page • An HTML file must have an htm or html file extension • An HTML file can be created using a simple text editor [pic] Do You Want to Try It? If you are running Windows, start Notepad. If you are on a Mac, start SimpleText. In OSX start TextEdit and change the following preferences: Open the "Format" menu and select "Plain text" instead of "Rich text". Then open the "Preferences" window under the "Text Edit" menu and select "Ignore rich text commands in HTML files". Your HTML code will probably not work if you do not change the preferences above! Type in the following text: | | | | |Title of page | | | | | |This is my first homepage. This text is bold...

Words: 2381 - Pages: 10

Free Essay

Html

...HTML & CSS Design and Build Websites Jon Duckett John Wiley & Sons, Inc. HTML & CSS Design and build Websites Published by John Wiley & Sons, Inc. 10475 Crosspoint Boulevard Indianapolis, IN 46256 www.wiley.com ©2011 by John Wiley & Sons, Inc., Indianapolis, Indiana ISBN: 978-1-118-00818-8 Manufactured in the United States of America Published simultaneously in Canada 10 9 8 7 6 5 4 3 2 1 No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization through payment of the appropriate per-copy fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600. Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 7486011, fax (201) 748-6008, or online at http://www.wiley.com/go/permissions. Limit of Liability/Disclaimer of Warranty: The publisher and the author make no representations or warranties with respect to the accuracy or completeness of the contents of this work and specifically disclaim all warranties, including without limitation warranties of fitness for a particular purpose. No warranty may be created or extended by sales...

Words: 83244 - Pages: 333

Free Essay

Html

...1. HTML stands for what? Hyper Text Markup Language 2. The end tag is written like the start tag, with a forward slash before the tag name. 3. Start and end tag are also called opening tags and closing tags. 4. "HTML tags" and "elements" are often used to describe the same thing. 5. An HTML element is everything between the start tag and the end tag, including the tags 6. The purpose of a web browser is to read HTML documents and display them as web pages. 7. HTML elements with no content are called empty elements. 8. HTML headings are defined with the <h1> to <h6> tags. 9. HTML paragraphs are defined with the <p> tag. 10. Links are specified in HTML using the <a> tag. 11. The href attribute Specifies the destination of a link. 12. The target attribute Specifies where to open the linked document. 13. HTML images are defined with the <img /> tag. 14. The <hr /> tag creates a horizontal line in an HTML page 15. Which tag defines HTML comments tag? <!-- --> 16. Which tag defines HTML line Breaks? <br /> 17. Which tag defines BOLD text? <b> 18. Which tag defines italic text? <i> 19. Which tag defines an emphasized text? <em> 20. Which tag defines small text? <small> 21. Which tag defines strong text? <strong> 22. Which tag defines subscripted text? <sub> 23. Which tag defines superscripted text? <sup> ...

Words: 606 - Pages: 3

Free Essay

Html

...Advantages: * HTML is a free Language conceived by user for users * A HTML page could be read by any brand computers and provide the same result * Its distributed structure permits to exchange an element without change anything on the page where it is. This same element can be used many times without having to re designed it many times. * Network link: We can integrate local elements into a personal web page or to remote surfers and elements which we integrates address (URL). * Hypertext permits to manage different information without have to store them locally Advantages Easy to use Loose syntax (although, being too flexible will not comply with standards) Supported on almost every browser, if not all browsers. Widely used; established on almost every website, if not all websites. Very similar to XML syntax, which is increasingly used for data storage Free - You need not buy any software Easy to learn & code even for novice programmers Disadvantages * It cannot produce dynamic output alone, since it is a static language * Sometimes, the structuring of HTML documents is hard to grasp * You have to keep up with deprecated tags, and make sure not to use them * Deprecated tags appear because another language that works with HTML has replaced the original work of the tag; thus the other language needs to be learned (most of the time, it is CSS) * Security features offered by HTML are limited Disadvantages: ...

Words: 1032 - Pages: 5

Free Essay

Html

...CHAPTER 1: DEVELOPING A BASIC WEB PAGE 1 Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 1 XP OBJECTIVES Explore the structure of the World Wide Web  Learn the basic principles of Web documents  Create a HTML document  View an HTML file using a Web browser  Use HTML tags for text, headings, paragraphs, and lists  Insert character tags into an HTML document  2 Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 1 XP OBJECTIVES (CONTINUED): Insert an inline graphic image into a HTML document  Add special characters to an HTML document  Insert horizontal lines into an HTML document  Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 1 3 XP INTRODUCING THE WORLD WIDE WEB  In order for computers to share resources efficiently, they can be linked together in one of the following structured networks: Networks are very useful, their use led to a “network of networks” called the Internet. linked within a local area network (LAN)  linked across a wide area network (WAN)  Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 1  4 THE INTERNET The Internet consists of millions of interconnected computers that enable users to communicate and share information.  Many Internet tools required users to master an array of terms, acronyms, and commands before they could navigate the Internet.  The World Wide Web was developed to make the Internet...

Words: 2034 - Pages: 9

Free Essay

Html

...HTML is a markup language for describing web documents (web pages). * HTML stands for Hyper Text Markup Language * A markup language is a set of markup tags * HTML documents are described by HTML tags * Each HTML tag describes different document content HTML can be edited by using professional HTML editors like: * Microsoft WebMatrix * Sublime Text However, for learning HTML they 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. All HTML documents must start with a type declaration: <!DOCTYPE html>.The HTML document itself begins with <html> and ends with </html>.The visible part of the HTML document is between <body> and </body>. HTML elements are written with a start tag, with an end tag, with the content in between. Attributes provide additional information about HTML elements.HTML Attributes: * HTML elements can have attributes * Attributes provide additional information about an element * Attributes are always specified in the start tag * Attributes come in name/value pairs like: name="value" Headings are important in HTML documents. HTML Headings. Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading. The HTML <p> element defines a paragraph. Setting the style of an HTML element, can be done with the style attribute...

Words: 317 - Pages: 2

Free Essay

Html

...Web and HTML What is the World Wide Web?          The World Wide Web (WWW) is most often called the Web. The Web is a network of computers all over the world. All the computers in the Web can communicate with each other. All the computers use a communication standard called HTTP. Web information is stored in documents called Web pages. Web pages are files stored on computers called Web servers. Computers reading the Web pages are called Web clients. Web clients view the pages with a program called a Web browser. Popular browsers are Internet Explorer and Netscape Navigator. How does the WWW work? How does the browser fetch the pages?    A browser fetches a Web page from a server by a request. A request is a standard HTTP request containing a page address. A page address looks like this: http://www.someone.com/page.htm. How does the browser display the pages?     All Web pages contain instructions for display The browser displays the page by reading these instructions. The most common display instructions are called HTML tags. HTML tags look like this

This is a Paragraph

. Who is making the Web standards?       Netscape or Microsoft does not make up the Web standards. The rule-making body of the Web is the W3C. W3C stands for the World Wide Web Consortium. W3C puts together specifications for Web standards. The most essential Web standards are HTML, CSS and XML. The latest HTML standard is XHTML 1.0. Introduction to HTML What is an HTML File? ...

Words: 4294 - Pages: 18

Free Essay

Html Frames

...HTML Frames • Frames allow you to have multiple sections of the browser window, called frames, each showing their own .html file within the frame. • HTML Frames can be used to split a web page so you can load multiple HTML files or pages into one web page. This will cause the web browser to display multiple pages at one time. Frame sets are rarely used these days, as the introduction of server side scripting languages such as php and asp allow you to create content pages dynamically. The introduction of HTML5 has also provided new methods of doing page layouts without having to use frames. Frame Set - ... • the frameset tag defines a group of frames. Setting the rows and cols attribute allow you to create the number of frames needed for your layout. • rows="??,??" - To set up multiple frames in rows, replace the question marks by the size of each row, either in pixels or as a percentage. A * can be used as a wild card, for instance: rows="100,*" would give you a top frame of 100 pixels high, and a bottom frame using the rest of the screen. cols="??,??" - Similar to rows, a number of frames can be set out in columns. border="?" - Frame border thickness in pixels. bordercolor="?" - Colour of border between frames. (*) • • • Frame - Each frame within a set will need a frame tag to tell it which web page to load in the frame. It uses the attribute: • src="url" - Filename or URL of page to show in the frame • noresize="noresize"...

Words: 672 - Pages: 3

Free Essay

Html Forms

...HTML FORMS Introduction For a website to be successful, it is important to be able to get feedback from visitors to your site. This could be a request for information, general comments on your site or even a product order. This could be done with a MAILTO: link but providing a form has several advantages over a simple email. .. It makes it easier for people to send the information .. A form gives you greater control over the information that is sent. .. Form results can be organised in a way that makes them easy to store in a spreadsheet or database. These fields can be added to your forms:  Text field  Password field  Hidden field  Text area  Check box  Radio button  Drop-down menu  Submit button  Reset button  Image button Form Handlers When a form is filled in by a visitor to your site and sent, the results of the form need to be processed in some way. One of the most common ways to process form results is with a CGI (Common Gateway Interface) script. This is a small program that the information entered in to the form is sent to as soon as the form is submitted. The purpose of this script is to accept the results of a form, organise the results and send the results to an appropriate location, such as a text file, database or email address. In these exercises we won’t go into creating CGI scripts since that is quite different from HTML and requires some programming knowledge. There are many free CGI scripts on the Internet that you can download...

Words: 1499 - Pages: 6

Premium Essay

Html Text

...HTML, DHTML & JavaScript HTML, DHTML & JavaScript PRAVESH – Student Guide Subject: HTML. DHTML & JavaScript V1.0 Training & Development Division Page 1 of 282 HTML, DHTML & JavaScript Chapter 1: Introduction to Web and Internet...................................................................................3 Chapter 2: HTML's Role on the Web...........................................................................................13 Chapter 3: Creating a Web Page and Entering Text ....................................................................24 Chapter 4: Changing and Customizing HTML Text....................................................................33 Chapter 5: Displaying Text in Lists .............................................................................................43 Chapter 6: Adding Graphics to Your Web Pages.........................................................................54 Chapter 7: Hypertext and Creating Links.....................................................................................64 Chapter 8: Clickable Image Maps and Graphical interfaces........................................................74 Chapter 9: HTML Forms..............................................................................................................85 Chapter 10: Images, Multimedia Objects and Background Graphics ..........................................96 Chapter 11: Adding Tables to your Documents.............................

Words: 56638 - Pages: 227

Free Essay

Html Introduction

...acknowledgment is made explicitly in the text, nor has any part been written for me by another person. Student’s Signature : _____________ Evaluator’s comments: _____________________________________________________________________ Marks obtained : ___________ out of ______________________ ------------------------------------------------- Content of Homework should start from this page only: ------------------------------------------------- Q1: How the HTML documents are structured? Discuss according to the logical and physical elements. (5) Ans: An HTML 4 document begins with a DOCTYPE declaration that declares the version of HTML to which the document conforms. The HTML element follows and contains the HEAD and BODY. The HEAD contains information about the document, such as its title and keywords, while the BODY contains the actual content of the document, made up of block-level elements and inline elements. A basic HTML 4 document takes on the following form: <!DOCTYPE html> <HTML> <HEAD> <TITLE>The document title</TITLE> </HEAD> <BODY> <H1>Main heading</H1> <P>A paragraph.</P> <P>Another paragraph.</P> <UL> <LI>A list item.</LI> <LI>Another list item.</LI> </UL>...

Words: 2895 - Pages: 12

Free Essay

History of Html

...Assignment On HYPERTEXT MARKUP LANGUAGE (HTML) Prepared For: Shuvra Chakraborty Adjunct Faculty Department of Computer Science & Engineering, East West University. Prepared By: Abdul Aziz ID: 2012-2-10-249 Course: CSE101 Section: 11 Submission Date: March 29, 2016. East West University Definition of HTML HTML – HyperText Markup Language. Short for HyperText Markup Language, the authoring language used to create documents on the World Wide Web. HTML is similar to SGML, although it is not a strict subset. HTML defines the structure and layout of a Web document by using a variety of tags and attributes. Along with CSS, and JavaScript, HTML is a cornerstone technology used to create web pages, as well as to create user interfaces for mobile and web applications. Web browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a website semantically and, before the advent of Cascading Style Sheets (CSS), included cues for the presentation or appearance of the document (web page), making it a markup language, rather than a programming language. HTML defines the structure and layout of a Web document by using a variety of tags and attributes. The correct structure for an HTML document starts with (enter here what document is about) and ends with . All the information you'd like to include in your Web page fits in between the and tags. History of HTML Hypertext systems were envisioned as early...

Words: 1254 - Pages: 6

Free Essay

Html Tags

...An HTML element is everything from the start tag to the end tag: Start tag * | Element content | End tag * | <p> | This is a paragraph | </p> | <a href="default.htm"> | This is a link | </a> | <br> | | | * The start tag is often called the opening tag. The end tag is often called the closing tag. You will learn more about HTML tags and attributes in the next chapters of this tutorial. Tag | Description | <html> | Defines an HTML document | <body> | Defines the document's body | <h1> to <h6> | Defines HTML headings | <hr> | Defines a horizontal line | <!--> | Defines a comment | Tag | Description | <p> | Defines a paragraph | <br> | Inserts a single line break | Tag | Description | <b> | Defines bold text | <big> | Defines big text | <em> | Defines emphasized text | <i> | Defines italic text | <small> | Defines small text | <strong> | Defines strong text | <sub> | Defines subscripted text | <sup> | Defines superscripted text | <ins> | Defines inserted text | <del> | Defines deleted text | HTML "Computer Output" Tags Tag | Description | <code> | Defines computer code text | <kbd> | Defines keyboard text | <samp> | Defines sample computer code | <tt> | Defines teletype text | <var> | Defines a variable | <pre> | Defines preformatted...

Words: 592 - Pages: 3

Popular Essays

Influence of Writing Essay
Homelessness in the Us Essay
Nissan Target Costing Essay
Cai Materials Essay
Evaluate the Extent to Which Freud's... Essay
Entrepenuer Opportunities Essay