HTML BASICS Why can we see images and text, hear sounds, and view video files on the Web? The browser and a language called HTML are largely responsible.

Slides:



Advertisements
Similar presentations
How To Make Your Own Web Page: Basic Web Design
Advertisements

HTML Basics Customizing your site using the basics of HTML.
HTML.
HTML. The World Wide Web Protocols Addresses HTML.
Html: getting started HTML is hyper text markup language. It is what web browsers look at on the Internet. HTML documents should be created in a simple.
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.
Creating a Web Page HyperText Markup Language. HTML Documents  Created using any text editor  Notepad  Vi, Pico, or Emacs  If using word-processor,
HTML Introduction HTML
ETT 429 Spring 2007 Web Design I.
HTML Basics An Introduction to HTML. What is HTML? Stands for “Hyper Text Markup Language” Composed of “tags” which are surrounded by sideways triangles.
HTMLMR.Mostafa badr1. Lesson 3 HTML Tags Lesson 2 Creating a HTML File Lesson 1: Hyper Text Markup Language (HTML) Basics Get Trained for a Better Future.
Designing Web Pages Getting to know HTML... What is HTML? Hyper Text Markup Language HTML is the major language of the Internet’s World Wide Web. Web.
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.
Exploring Microsoft Office XP - Microsoft Word 2002 Chapter 61 Exploring Microsoft Word Chapter 6 Creating a Home Page and Web Site By Robert T. Grauer.
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.
THE BACKBONE OF EVERY WEB PAGE HTML Day 1. What will we learn? How to create a basic web page Backgrounds and colors How to link Web sites How to include.
1 Essential HTML coding By Fadi Safieddine (Week 2)
McGraw-Hill/Irwin Copyright © 2013 by The McGraw-Hill Companies, Inc. All rights reserved. Extended Learning Module F Building a Web Page with HTML.
XP Mohammad Moizuddin Creating Web Pages with HTML Tutorial 1 1 New Perspectives on Creating Web Pages With HTML Tutorial 1: Developing a Basic Web Page.
HTML presentation Embedding Graphics in Web Pages n HTML uses an empty tag called the (image tag) n n n or n n n Note: all web production tools do insert.
HTML CRASH COURSE. What is HTML?  Hyper Text Markup Language  The language used to make web pages  Written by using tags.
By Brieya. What is HTML Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects.
Computing Theory: HTML Year 11. Lesson Objective You will: o Be able to define what HTML is - ALL o Be able to write HTML code to create your own web.
Web Programming Basics of HTML. HTML stands for Hyper Text Mark-up Language A mark-up language is different than those that you have learned before in.
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.
All you ever needed to know…and more!. H.T.M.L. HyperText Mark-up Language Web’s programming language All web browsers Set of instructions Written with.
Computer Information Technology – Section 3-4. HTML – The Language of the Internet Objectives: The Student will: 1. Look at HTML 2. Understand the basic.
HTML Codes Miss B.
HTML H yper T ext M arkup L anguage. What is HTML? It is a programming language that Defines the format of a World Wide Web (WWW) page. It is a simple.
CPSC 203 Introduction to Computers Lab 33 By Jie Gao.
Chapter 2 Web Page Design Mr. Gironda. Elements of a Web Page These are things that most web pages use.
Introduction to HTML. HTML Introduction HTML – Hypertext Markup Language are the instructions that tell a browser how to lay out the information (text,
Web Page Design Introduction. The ________________ is a large collection of pages stored on computers, or ______________ around the world. Hypertext ________.
Introducing the World Wide Web Internet- a structure made up of millions of interconnected computers whose users communicate with each other and share.
15.1 Fundamentals of HTML DeKalb County School System.
CPSC 203 Introduction to Computers Lab 66 By Jie Gao.
Making Websites with Dreamweaver BTT. What is Dreamweaver?  “What You See Is What You Get” (WYSIWYG) web design software  Rather than writing code and.
Lesson One Quick HTML Know-How Pages 3 to 30. Objectives for Today! For Today:  Discover HTML tags  Enter starting tags  Learn to save  Create a page!
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.
Web Authoring with Dreamweaver. Unit Objectives  Be able to define keywords: HTML, HTTP (protocol), browser, web server, client/server, tag, attribute,
This shows CIS17 and the first day introduction..
1 2/16/05CS120 The Information Era Chapter 4 Basic Web Page Construction TOPICS: Intro to HTML and Basic Web Page Design.
CS 100 Introduction to Web Page Construction and HTML.
HTML HyperText Markup Language Victoria E. Kozlek.
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.
Using Text Edit. Create Folders to Organize a Site  Identify the location where you are storing your Web sites. Ask your teacher for help if needed.
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.
Using HTML. Glogger Glogger is like you own personal web page, you can add… Pictures Text Videos Music, etc… Modify and adjust anything you want Glogger.
HTML. Hyper Text Markup Language Markup your text document The markup is the tag Hyper text means you can jump from place to place Programming language.
Basic HTML Page 1. First Open Windows Notepad to type your HTML code 2.
HTML And the Internet. HTML and the Internet ► HTML: HyperText Markup Language  Language in which all pages on the web are written  Not Really a Programming.
Online PD Basic HTML The Magic Of Web Pages
Web Basics: HTML/CSS/JavaScript What are they?
HTML Basics.
Extended Learning Module F
Section 4.1 Section 4.2 Format HTML tags Identify HTML guidelines
Computers and Information Systems
HTML GUIDE Press F5 and then
Understanding Web Sites
HTML Basics and CSS style
HTML.
HTML HYPERTEXT MARKUP LANGUAGE.
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
Presentation transcript:

HTML BASICS

Why can we see images and text, hear sounds, and view video files on the Web? The browser and a language called HTML are largely responsible.

H yper T ext M arkup L anguage What IS that anyway? ANSWER: Coding language used to create hypertext (linking) documents for use on the World Wide Web

HTML coding is read by a browser, such as Netscape or Internet » Explorer

You can write your own HTML files with simple “coding tags” Tags work in pairs to begin and end a command. Write html? Who, me? beginning tag ending tag

Browsers read these coded and create what you see and hear in your browser including colored backgrounds, graphics, font size and style,.midi and.wav files, videos...

Here comes the HTML coding... Let’s look at a basic one… just for fun, of course!

Artesian/Letcher Fifth Grade Artesian/Letcher Fifth Grade Yadda, yadda, yadda Huh??

Here’s What You’ll See Title Bar Heading Body

Here are some basic tags: Explanation: These tags tell the browser to begin and end reading an html file. Explanation: The browser will read what is between these tags as the heading.

The Title of Your Webpage A/L Fifth Grade Explanation: Whatever you type between the tags will appear in the title bar at the top of the browser window.

More tags Explanation: Center whatever is between these tags Explanation: These tags indicate heading size. You can choose from 1-5, 1 being the largest.

Huh? ? Font Style, Size, and Color Explanation: These tags command the font style, color, and size. Each color has a code.

The Body of Your Page Explanation: Whatever appears between these tags will be read as the body or “meat” of the webpage. Hey, I think I understand this!

An image in the body?? Explanation: Insert an image (img) here. The source is named “kids3.jpg” NOTE: You must have the image in the file in order for the browser to read it.

Text in the Body Type whatever you want to say in the body of your webpage between the body tags. Example: Yadda, yadda, yadda…

HTML is a great help when you need to trouble shoot in the WYSIWYG web development software! Of course, there’s much much much MUCH more to html! A super site to learn more is called HTML Goodies located at

Let’s Make One! Make a new folder under “personal” called HTML Find an image you’d like to use on your page Save it in your HTML folder –It must be in.jpg or.gif format

Now for the HTML We’ll type it in Notepad Start/Programs/ Accessories/ Notepad/ New File

Here’s the code: Type what you want in the title bar here –Type what you want your heading to say here.

The body Type what you want to say in the body under your image here.

Let’s Save It!! File/Save As Type in a file name with the extension.html Example name: school.html Put it in your HTML folder with your graphic

Let’s Browse It! Open a browser (Netscape or Internet Explorer) NETSCAPE--File/Open Page/Choose File –Browse to your file (OK) INTERNET EXPLORER--File/Open –Browse to your file (open,OK)

ABRACADABRA!! You did it!!! ---If it didn’t work, find errors and try again. It will work!

Artesian/Letcher Fifth Grade Artesian/Letcher Fifth Grade Yadda, yadda, yadda