Web Design Using HTML Codes. WHAT DO I NEED TO BEGIN DESIGNING A HOME PAGE? 1.YOU NEED A FOLDER (also called a DIRECTORY) You should set up a folder or.

Slides:



Advertisements
Similar presentations
Introduction to Creating a Web Page using a Simple Text Editor (Notepad) 1  2004 Ecirp Studios
Advertisements

Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
Hyper Text Markup Language.  HTML is a language for describing web pages.  HTML stands for Hyper Text Markup Language  HTML is not a programming language,
WeB application development
Anne McGrath 16 th February  Review of what we have learned so far.  Angled brackets surround HTML tags.  The words between the angled brackets.
Project 8 Creating Style Sheets.
Creating and Editing a Web Page Using Inline Styles
Creating and Editing a Web Page
Hypertext Markup Language. Platform: - Independent  This means it can be interpreted on any computer regardless of the hardware or operating system.
McGraw-Hill/Irwin The Interactive Computing Series © 2002 The McGraw-Hill Companies, Inc. All rights reserved. How to Create Web Pages Using HTML Introduction.
Web Page Development Identify elements of a Web Page Start Notepad
HTML Introduction HTML
Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.
COMPUTERS AND INFORMATION SYSTEMS HTML. How the Web Works To access a web site  Enter its address (URL) in the address box of your browser 
 Definition of HTML Definition of HTML  Tags in HTML Tags in HTML  Creation of HTML document Creation of HTML document  Structure of HTML Structure.
Basic HTML The Magic Of Web Pages. Create an HTML folder  Make a folder in your H drive and name it “HTML”. We will save EVERYTHING for this unit here.
Creating Tables in a Web Site
Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where.
Using HTML to Create a Basic Web Page… By Josh Gallagan.
Basic HTML Hyper text markup Language. Re-cap  … - The tag tells the browser that this is an HTML document The html element is the outermost element.
Web Design Unit Assignment #2: Job Skills Favorite Links Page You will create a HTML web page with links to informational websites about a variety of job.
HTML Structure & syntax
Creating and Editing a Web Page using HTML IMED1316.
Creating and Editing a Web Page Project 2. Project Objectives Project 2: Creating and Editing a Web Page 2 Identify elements of a Web page Start Notepad.
HTML. WHAT IS HTML HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of.
Html Basic Codes Week Two. Start Your Text Editor Windows use 'Notepad’ Macintosh use 'Simple Text'
Introduction to HTML. What is a HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup tags  The.
CPSC 203 Introduction to Computers Lab 23 By Jie Gao.
15.1 Fundamentals of HTML.
Just Enough HTML How to Create Basic HTML Documents.
HTML Hyper Text Markup Language. What is an HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup.
HTML INTRODUCTION. What is HTML?  HTML stands for Hypertext Markup Language  Developed in 1990  Hidden code that helps us communicate with others on.
Introduction to HTML. Slide 1 Hard-Coding What is hard-coding? –Creating the page in a text editor just using HTML A Web designer should know how to hard-
HTML BASICS Web Design I. Web Design  WWW created in the late 1980’s  Used in academics for the next 5 years  Mosaic (1994) allowed both pictures &
INTRODUCTORY Tutorial 1 Using HTML Tags to Create Web Pages.
Introduction to HTML Wah Yan College (Hong Kong) Mr. Li C.P.
HTML Structure & syntax. Introduction This presentation introduces the following: Doctype declaration HTML Tags, Elements and Attributes Sections of a.
Ali Alshowaish. What is HTML? HTML stands for Hyper Text Markup Language Specifically created to make World Wide Web pages Web authoring software language.
Chapter 2 Web Page Design Mr. Gironda. Elements of a Web Page These are things that most web pages use.
HTML Comprehensive Concepts and Techniques Third Edition 2 nd Project Creating and Editing a Web Page.
15.1 Fundamentals of HTML DeKalb County School System.
Creating Your First Web Page – Topic: Creating a wiki, blog, image blog and podcast Click Arrow - Next Slide 1.
4 HTML Basics Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and.
15.1 Fundamentals of HTML 2 assignments: 1st—complete the worksheet. 2nd—create your first HTML web page following the directions in this PowerPoint where.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
1 After completing this lesson, you will be able to: Get around the Internet with your browser. Connect to the Internet. Print Web pages. Save Web pages.
Creating and Editing a Web Page
HTML HYPER TEXT MARKUP LANGUAGE. INTRODUCTION Normal text” surrounded by bracketed tags that tell browsers how to display web pages Pages end with “.htm”
Basic HTML. Lesson Overview In this lesson, you will learn to:  Write HTML code using a text editor application such as Notepad.  View Web pages created.
Creating and Editing a Web Page Using Inline Styles
PART 1: Introduction to HTML & CSS. Lecture 1: HTML 5 Basic Structure.
Microsoft Office 2008 for Mac – Illustrated Unit D: Getting Started with Safari.
Behind every site is a mix of special languages that your web browser understands The main way of describing any website is HTML HTML stands for Hyper.
HTML-I Basic HTML Elements. HTML (Hyper Text Markup Language) HTML is a document layout and hyperlink- specification language. i.e. a language used to.
HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page.
1 Your Web Page title body of Web page main heading H2 heading bulleted list paragraph.
Creating Web Pages with Links, Images, and Embedded Style Sheets
Project 02 Creating and Editing a Web Page Concept Map of Unit Creating and Editing a Web Page Key Learning Understand the elements to create a web page.
HTML is the language that allows text and graphics to be displayed as Web pages. It is a set of special codes, called tags, that tells a browser application.
NOTEPAD++ Lab 1 1 Riham ALSmari. Why Notepad++ ?  Syntax highlighting  Tabbed document interface  Zooming  Indentation code  Find and replace over.
HTML Structure & syntax
Online PD Basic HTML The Magic Of Web Pages
Introduction to HTML.
HTML Basics.
Introduction to HTML.
HTML Structure.
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
Creating and Editing a Web Page
15.1 Fundamentals of HTML 2 assignments: 1—complete the worksheet
Presentation transcript:

Web Design Using HTML Codes

WHAT DO I NEED TO BEGIN DESIGNING A HOME PAGE? 1.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.

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.

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. 1.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.

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, 1.Choose File from the menu bar 2.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. 3.Once you have seen how your web page looks in the browser, you can then SWITCH back to NotePad to continue working and editing.

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 " ". These symbols are also called "Angle Brackets". Thus we have an opening angle bracket " " around each tag

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

and tags is the beginning tag. It tells the browser that what follows is an HTML document. 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 tells the browser that what follows is an HTML document and tells the browser that the HTML document is completed. and 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 and tags.

and tags One of the statements that must be included between the and tags is the TITLE of your web page. The TITLE of your web page must occur between the and 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 and tags must be placed between the and tags.

and 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. tells your browser that what follows is to be the body of the Web page tells the browser that the body part of the page has ended.