1 / 10

Web Design Using HTML Codes

Web Design Using HTML Codes. WHAT DO I NEED TO BEGIN DESIGNING A HOME PAGE?. YOU NEED A FOLDER (also called a DIRECTORY) You should set up a folder or directory to hold only your HTML files (also called documents) for the web pages you are designing. Work in that folder only.

flynn
Download Presentation

Web Design Using HTML Codes

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Web Design Using HTML Codes

  2. WHAT DO I NEED TO BEGIN DESIGNING A HOME PAGE? YOU NEED A FOLDER (also called a DIRECTORY) You should set up a folder or directory to hold only your HTML files (also called documents) for the web pages you are designing. Work in that folder only. 2. YOU DO NOT NEED TO BE CONNECTED TO THE INTERNET You can write and design your HTML pages (that is, your web pages) off-line. If all you are doing is designing and creating web pages, you do not need to go on the internet 3. YOU NEED A BROWSER Internet Explorer and Firefox are among today's most popular browsers for viewing web pages and for surfing the internet.

  3. 4. YOU NEED A WORD PROCESSOR You need a simple word processor such as NotePad or WordPad. These simple word processors are also called text editors and are ideal for creating web pages. 5. YOU NEED TO HAVE BOTH YOUR BROWSER AND NOTEPAD ACTIVELY RUNNING To design a web page, you need to have BOTH your browser AND NotePad active at the same time. In other words, while you are working with one, the other is sitting there in the background.

  4. NAMING YOUR WEB PAGE When you save your web page for the first time, you need to give it a name. You not only have to give it a name but you also need to add a suffix (an extension) to the name. THE NAME: It is strongly recommended that you do not use spaces in the file name. 2. THE SUFFIX:The suffix is an extension to the name and declares the kind of document that it is. In HTML, the suffix is either ".htm" or ".html". "Htm" or "html" tells the browser you are working with HTML files - that is, an HTML document. SAVING YOUR WEB PAGE (YOUR HTML FILE OR DOCUMENT) 1. Choose File from the menu bar, then from the drop down menu, choose Save As. 2.In the Save As dialog window, make sure in NotePad that the Save as type box reads All Files. In the case of WordPad, it should be Text Document. 3. In the File name box, type in a suitable file name along with an extension (either .htm or .html). 4.Click on OK and the file (the web page) is saved.

  5. LOADING YOUR WEB PAGE INTO YOUR BROWSER Once you have saved your web page (your HTML file or document), you need to SWITCH over to your browser which is running in the background. Once you activate your browser, Choose File from the menu bar Choose Open or Open File or Open File in Browser (one of them should be in the File menu). You will then need to locate your web page, click on the file name and then click the OK button. Your HTML file will appear in the browser. Once you have seen how your web page looks in the browser, you can then SWITCH back to NotePad to continue working and editing.

  6. HTML TAGS • HTML works in a very straightforward manner. You type in your text and your tags. • Because we don't want the tags (elements) to appear in the browser, we need a way to tell the browser that something is a tag. • To tell the browser that something is a tag, you simply place "less than" and "greater than" symbols around them. • The LESS THAN symbol is "<" and the GREATER THAN symbol is ">". These symbols are also called "Angle Brackets". Thus we have an opening angle bracket "<" and a closing angle bracket ">" around each tag

  7. <BR>, <P> and <HR> TAGS <BR><BR> tells your browser to go to the beginning of the next line. BR stands for line BReak. <BR> acts in the same way as the ENTER key on your keyboard. <P><P> for Paragraph tells your browser to insert a blank or empty line and then begin a new line (a new paragraph <HR><HR> puts a line across the page. HR stands for Horizontal Rule.

  8. <HTML> and </HTML> tags • <HTML> is the beginning tag. It tells the browser that what follows is an HTML document. • </HTML> is the ending tag. It tells the browser that the HTML document is finished. • The forward slash before the tag (</ >) cancels the effect of the tag. This is true for all tags that affect text. Thus <HTML> tells the browser that what follows is an HTML document and </HTML> tells the browser that the HTML document is completed. • <HEAD> and </HEAD> tags • Next comes the HEAD element which, like the HTML element, also has an opening and closing tag. • Each web page must have the HEAD element. • Statements (or tags) that give information to a person visiting your website, or information such as those needed for a Search Engine are placed between the <HEAD> and </HEAD> tags.

  9. <TITLE> and </TITLE> tags • One of the statements that must be included between the <HEAD> and </HEAD> tags is the TITLE of your web page. • The TITLE of your web page must occur between the <TITLE> and </TITLE> tags and you are only allowed one TITLE element per page. • The information you provide in the title is also used to label the bookmark entry for your web page. That is, when a visitor bookmarks your site (adds it to their favorites list), it is the title that appears in the list. • In general, the title should be short. • The <TITLE> and </TITLE> tags must be placed between the <HEAD> and </HEAD> tags.

  10. <BODY> and </BODY> tags • After the title comes the main body of your Web page. It contains all the text and tags. It is the part that will be displayed on the browser screen. Thus the BODY element contains the actual contents of the document. • <BODY> tells your browser that what follows is to be the body of the Web page • </BODY> tells the browser that the body part of the page has ended.

More Related