Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts
HTML editors - Make Ease in Design
HTMLHTML editors are software which make ease to generate code and design easily with current design preview option. There are many free HTML editor which can easily download from various software website.
It is difficult coding with simple text editor so if you want flexibility in coding then you need a HTML or HTML,PHP,JAVA etc. editor.
Some of editor comes with the facility of auto tag . The editor Contain different HTML and CSS Layout. Only thing to do with such templates customize it.
HTML editor reduce your time and give a visual view of your html codes. You can download dream weaver for better web design. There may be many alternate for HTML and for web design some of them is given below with download links.
Below is some link which is redirected you to download the HTML editor
- http://www.coffeecup.com/free-editor/CoffeeFreeHTML10.1.exe (coffeecup HTML Editor)
- (Edit Plus- HTML editor)
- http://www.htmlkit.com/download/ (HTMLkit)
- www.adobe.com/in/products/dreamweaver.html ( Adobe Dream weaver )
TABLE CODES FOR WEBSITE LAYOUT
HTMLSome basic and useful table coded layout for static web design is given below you can copy and paste . Save Page as index.htm or index.html put the content between them
Two column layout with a header and a footer: Basic Two Layout:
Two column layout with a header:
Three column layout with header, navigation bar and footer:
PUTTING YOUR PAGE ON THE WORLD WIDE WEB
HTMLThe objective of this lesson is not to provide instructions on sending your Web pages to the World Wide Web (called uploading), but to provide Web sites which may be of help and will also provide Web space to store your pages for others to see. You are now at the next big step and ready to tackle it all on your own. You must sign up with a service by providing them some information about yourself. You will be assigned your own URL in regards to the nickname you provide the services.
All Web sites listed below are free. The author is not associated with any of these sites, and disclaims all liability from damages and such you or your pages or computer may incur from using these services. The below names belong to their respectful owners. Sites listed in no order.
ADJUSTING THE WHOLE WEB PAGE'S SETTINGS
HTMLGiving the whole page a set style allows for easy editing of a page's other, than an individual part of the web page. For example, instead of using the FONT tag with an A tag for every link in making them one color, you can use a simple attribute in the BODY tag. Below is listed all the ways you can change a web page through the BODY tag.
If you wish to set the font colors for the entire web page, use the attribute "text" set to a color, without the quotes. If you wish to set a background color for an entire page, use "bgcolor" (without the quotes) set to a color of your choice.
<body text="black" bgcolor="blue">
You can also set the colors for the page's links as well. To set the color for a normal link, use "link" (without the quotes) set to the color of your choice. To set the color of a link you are currently viewing its linked contents of, use "alink" (without the quotes) set to a desired color. Finally, to set the color of a link which you already visited and no longer are visiting, use "vlink" (without the quotes) set to a color of your choosing.
Don't want a color as your background? Have no fear - you can have any image you like. Just use "background" (without the quotes) set to the image of your choice. It uses the same image formats as the IMG tag. If you would like the image to be set in a fixed position, meaning that the image is still yet the rest of the page scrolls when you scroll a page. Use bgproperties="fixed" (with quotes where they are given).
<body background="kel2000.jpg" bgproperties="fixed" >
Finally you can set the left and top margins of the content on a web page. Setting both margins to 1 will wrap the entire page to these margins, and may be illegible at times, so you may wish to use 2 as the setting. To set the left margin, use "leftmargin" (without the quotes) and for the top margin, use "topmargin" (without the quotes) as the attributes.
<body leftmargin="1" topmargin="1">
USING FORMS
HTMLA form is as it sounds: a page where a user can provide information about a various topic or person. There is much to forms, and I will break each control down so that you may learn all the controls. Then we will create a very simple e-mail form, that doesn't send any information, but it will go to a "Sent" page just for your learning experience.
You must first know the basic format of forms, and the format below is what we'll be using. We will replace information when necessary to get our forms to work.
<form name="formname" method="how information is sent" action="action after form is submitted">
CONTROLS
</form>
Controls allow users to interact with the form's given information, whether it is a question, a thought, etc. What you put in the VALUE attribute would be sent to you, following what the user inputed. My quizzes uses a control, called a radio control. These are used when the user is required to provide only one answer, and cannot be undone unless more radio controls are provided, or a Reset button is provided, which will will learn about. A dot fills in this control.
<form name="formname" method="how information is sent" action="action after form is submitted">
<input type="radio" name="radio" value="Radio">Radio
</form>
It's opposite control, which will allow you to choose multiple selections, or undo a selection without needing multiple controls, is a checkbox control. A checkmark fills in this control.
<form name="formname" method="how information is sent" action="action after form is submitted">
<input type="checkbox" name="checkbox" value="Checkbox">Checkbox
</form>
The next control allows a user to type in information in a rectangle. This control, which only is a one row control, is called a textfield control If you want to provide the user with security, you can mask the text they type in. This means that instead of seeing their text as they type it, they will see asteriks instead. Just replace "text" with "password".
<form name="formname" method="how information is sent" action="action after form is submitted">
<input type="text" name="textfield" value="textfield">
</form>
The field below gives you an example of masking text.
When your users need a bigger field to fill out information, a text area control is needed.
<form name="formname" method="how information is sent" action="action after form is submitted">
<textarea>Textarea</textarea>
</form>
NOTE: You should not fill in textfields or text areas. Allow the user to do this him/herself.
The final control is the most important. It is simply an input button control. Input buttons are responsible for sending the information to you. The Submit button sends the form, while the Reset button clears every field in case the user made a mistake and wishs to correct it. Both buttons are demonstrated below, although they will not carry out their functions. You'll have to wait until the e-mail form to see this in effect.
<form name="formname" method="how information is sent" action="action after form is submitted">
<input type="submit" name="submit" value=" Submit ">
</form>
<form name="formname" method="how information is sent" action="action after form is submitted">
<input type="reset" name="reset" value=" Reset ">
</form>
There isn't anything new in the form except a few attributes, which are pretty self-explainatory. Before creating this e-mail form, you should create another web document and include "Your message has been sent." in the body. Name this file email2.htm as it will be used to return a confirmation telling the user their e-mail has been sent.
ADDING TABLES
HTMLTables can be used in many ways. They can be used to present information and data or to neatly layout part of, or a whole webpage, serving as a template for an entire website. Laying out your webpage using tables will be stressful when changing the entire layout of your website.
We will only use tables to present data and information, and to neatly organize our photographs for a photo album. We will also change how our tables will look.
It is important to know the basic format used to create a table, yet there must be text in the TR and TD tags for a table to completely appear. Tables have a default size, and overlapping text will be wrapped to the next line.
<table>
<tr><td>Put text/such here</td></tr>
</table>
The TR tag will create a table row, while the TD stands for table data, and will create a table cell. As you'll learn, you may place infinitan e number of TD tags in a single TR tag. The table below is a plain address book, and below it is the address book but with color and borders. Notice that <tr><td></td></tr> left blank stands as a parapgraph break for tables. Never include any breaks in a table in replace of a table row.
Here's the code for the finished address book, with color and all:
And here's the overall finished effect, with the CAPTION tag (which places a caption (table's name) above the table's data, and it can't be given a background color):
| Friend's Name | Friend's Address | Friend's Phone Number | Friend's Website |
| egbaba | STREET CITY, STATE ZIP | 000-000 | http://www.egbaba.in |
| Anywho Anyone | Any Address Any City, Any State Any Zip Code | 000-000 | http://www.egbaba.in |
Next we will make a photo album using some of our photos. I am going to include four photos, of myself and my cat. Note that the size of the photo will stretch the cell it is placed in if it is too big.
Here's the code:
Kelcey's Photo Album
|  |
 |  |
INSERTING IMAGES AND SOUND
HTMLIn Lesson 3, you learned only how to communicate with images and sounds. Now you will learn how to put them into your Web page!
When inserting an image, you can use either .gif, .jpg, .bmp, or even .png graphic files. So how do you choose when to use which? .bmp (Bitmap Images) are slow loading, take up much diskspace, but are high in quality. Gifs (Graphic Interchange Format) are fast-loading, small, but poor in quality. However, they are the popular format to use in Web designing. JPEG (Joint Photographic Experts Group) images are best used for your photographs: fast, low in diskspace, and OK quality. Finally, .png (Portable Network Graphics) images are similiar to .bmp files, except they are fast-loading.
To insert an image into your page, use the following format (either one or none of the given attributes may be used, it's up to you):
<img alt="My Photo" border="1" src="graphicfile">
The ALT attribute is decided upon you. It stands for "alternative text", and will allow a small popup box with text to appear when your mouse moves over, or hovers the image. Use this when you wish to give a breif description of an image, give its name, etc. You may choose not to even add anything, and allow it to look like this: alt="". The BORDER attribute sets a picture frame around the image. I give the effect of my photo with a border and alternative text below. You may choose any number, but too big of a number will not look good.
Finally, you may use an image with a link to communicate with objects and Web pages. You can use this to give a thumbnail view of your image, and click it to give the image as its full size, or you may, for example, make a button to link to Web page. Both examples, given in the code I used, and its effects, are given below. It is best to use your own images, so replace mine with yours. You will also learn two more attributes for IMG: WIDTH and HEIGHT:
Here are the codes:\
| Thumbnail | |
| Link by Image |
Adding sound is very easy and fun. The formats supported include .wav, .mid, .mp3, and .au. Use .wav (Wave) for small file: slow loading, excellent quality, and takes up space. Use .mid (MIDI) for music without lyrics, using solely instruments. .au (Audio) is similiar to a wave file, and .mp3 (MPEG 3) is small and excellent quality, and not too bad at loading. This code will play the file you specify upon the loading of the page:
<bgsound src="soundfile" width="0" height="0">
COMMUNICATING BETWEEN HTML WEBPAGES AND OBJECTS
HTMLFor this moment, I will define an object as images and/or sounds. This definition will be altered greatly in the program.
Communicating between pages is done through the use of hypertext links (or links). The format for one is listed below:
<a href="webpage">Text/images go here</a>
Open index.htm, and after the paragraph break parapgraph, the the following, which will allow you to click the link to index2.htm in index.htm:
<a href="index2.htm">Click to load index2.htm</a>
Double-click index.htm on the desktop, and click on the link. See what it does.
Now let's communicate with objects. You will need Windows 98 to be sure you have all the files, or link to your own files! We will add an image, sound, and text file to the page. Click the Back button of your browser to return to your webpage after clicking on the text file and image link you make. An example is provided to allow these two files to be opened in their own window so that you won't have to deal with the hassle of moving back to your webpage. Use the following formats:
Image: <a href="../clouds.bmp">Click to open clouds.bmp in your browser</a>
Sound: <a href="../MEDIA/chimes.wav">Click to play chimes.wav</a>
Text File: <a href="../tips.txt">Click to view tips.txt in the browser</a>
Here are the examples to open tips.txt and clouds.bmp in a new window:
Text File: <a href="../tips.txt" target="_blank">Click to view tips.txt in the browser</a>
Image: <a href="../clouds.bmp" target="_blank">Click to open clouds.bmp in your browser</a>
The folder names do not have to be capitalized. The "../" stand as a relative link. This particular symbol means to move up one folder in the folder hierarchy. Another way of specifying a relative link is by specifying the folder, then the file, or just a file by itself (which you've already done). Here is an example (which will not work if clicked on unless placed on the root folder of your hard drive (C:/)):
<a href="WINDOWS/clouds.bmp" target="_blank">Click to open clouds.bmp in your browser</a>
Finally, you can specify a link using an absolute link. By doing this, you are given the full path to a file or webpage. Instead of using relative links, I could've used absolute links defining the location for each file, which I list below:
Image: <a href="file://C|/WINDOWS/clouds.bmp" target="_blank">Click to open clouds.bmp in your browser</a>
Sound: <a href="file://C|/WINDOWS/MEDIA/chimes.wav" target="_blank">Click to play chimes.wav</a>
Text File: <a href="file://C|/WINDOWS/tips.txt" target="_blank">Click to view tips.txt in the browser</a>
Finally, if you wish to provide a link to your favorite website, which I'll use mine as an example, it must be written in this format or it won't work. In no way is an URL (Uniform Resource Locator; the website's address) to someone else's website ever a relative link.
<a href="http://www.egbaba.in/index.html">Click here to go to my website</a>
Note: When specifying either a relative or absolute paths, you may exchange a slash "/" with a back slash"\", but you must use one or the other. It is not a good idea to mix them
HTML - TEXT FORMATTING
HTMLBeing able to format your Web page using text is a very effective way of getting your word across. I will give you some information on various tags, and then we will write a sentence and a paragraph in HTML!
Open index.htm. After the body text you already have typed, add this message:
<br>Welcome to my webpage!
We will bold the text. This means, the text will appear darker.
<br><b>Welcome to my webpage!</b>
We will italicise the bold text. This means, the text will appear darker and slanted.
<br><b><i>Welcome to my webpage!</i></b>
We will now underline the bold, italicized text. This means, the text will appear darker, underlined, and slanted.
<br><b><i><u>Welcome to my webpage!</u></i></b>
We will now strike-out the bold, underlined, italicized text. This means, the text will appear darker, crossed-out, underlined, and slanted.
<br><b><i><u><s>Welcome to my webpage!</s></u></i></b>
We will now center the bold, underlined, italicized, striked-out text. This means, the text will appear darker, crossed-out, underlined, and slanted, and will be positioned in the center of the line.
<br><center><b><i><u><s>Welcome to my webpage!</s></u></i></b></center>
Finally, we will now add a background color to the bold, underlined, italicized, striked-out, centered text. This means, the text will appear darker, crossed-out, underlined, and slanted, and will be positioned in the center of the line, and highlighted yellow.
<br><center><b><i><u><s style="background-color:yellow">Welcome to my webpage!</s></u></i></b></center>
Next, we will define a font name, a font size, and font color for our text. Of the font names, the most common are Arial and Times. Your size can range from 1 (smallest) to 7 (biggest).
<br><center><b><i><u><s style="background-color:yellow"><font color="red" size="7" face="Arial">Welcome to my webpage!</font></s></u></i></b></center>
Here is a finished example of everything we've done to what at first was dull text to know some color and formatted text (the BR element is not demonstrated correctly, it will be in the second example).
Before I present the second example, let me explain the weird order. First of all, notice that the open tag of an element is the end tag of that same element, the second to last tag of an element is the second tag of the same element, and so on. This "splitting" up the a tag in such an order is called nesting. Always put first line and paragraph breaks then the CENTER element. Would it make since to use the B element followed by the P element? Paragraph returning in bolded text makes since, bolding paragraph returns do not since they are only space: you can't see it, but you know it's there. It's like dark matter in space: you can see it, but there's nothing physically there. I will explain more in-depth about "style" in the program itself.
The next example demonstrates how to add spaces and returns to your text. After the text which you just finished above (Welcome to...), type the following, on the next line, below this text.
<br>This is a line break. It returns text and such to the next line, one line down from the space above it.
<p></p>This is a paragraph break. It returns text and such to the next two lines, two lines down from the 2 spaces above it.
This is a non-breaking space. It is used to separate words from punctuation, letters, and even numbers.
Notes to Remember:
- Two spaces put in by the keyboard will not be interpreted by the browser. You will have to use " " (w/o quotes) to achieve two spaces.
- A webpage doesn't print as just one page from your printer on paper, it can be one or more than one. Watch out!
- A line is an imaginary line where text is allowed. Notice the text in the box below are written neatly as if they were on lines. There is space between both lines - a space where you are not allowed to type in, and about .5 in
Subscribe to:
Posts (Atom)