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.

Slides:

Advertisements

Similar presentations

Introduction to Web Design Lecture number:. Todays Aim: Introduction to Web-designing and how its done. Modelling websites in HTML.

Advertisements

Introduction to HTML. A Web Page is.. An ASCII (text) file.. Whose filename ends with.htm or.html –index.html or cookie-recipe.htm Contains HTML tags.

HTML Basics Customizing your site using the basics of HTML.

Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.

A guide to HTML. Slide 1 HTML: Hypertext Markup Language Pull down View, then Source, to see the HTML code. Slide 1.

INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.

HTML Minute University Richard Fisher 10/1/2001 HTML FSA Training2 HTML Overview  HTML  HyperText Markup Language.

How Tags are used to form your Web Page

Hypertext Markup Language. Platform: - Independent  This means it can be interpreted on any computer regardless of the hardware or operating system.

HTML Programming last updated 9/12/05 at 1:30pm HyperText Markup Language Reference: – HTML BasicsHTML Basics An HTML program is a set of paired tags that.

Introduction to HTML 2006 INT197B. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.

Creating a Web Page HyperText Markup Language. HTML Documents  Created using any text editor  Notepad  Vi, Pico, or Emacs  If using word-processor,

Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.

HTML Basics An Introduction to HTML. What is HTML? Stands for “Hyper Text Markup Language” Composed of “tags” which are surrounded by sideways triangles.

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 

1 Creating a Web Page An introduction to Hypertext Markup Language (HTML) ~~~~~ ~~~~ ~~~~~

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.

Basics of HTML.

Understanding HTML Code

Chapter 4 (through page 110) Fluency with Information Technology 4 th edition by Lawrence Snyder (slides by Deborah Woodall : 1.

Html Basic Codes Week Two. Start Your Text Editor Windows use 'Notepad’ Macintosh use 'Simple Text'

Unit 1 Changing the Appearance of Text. TITLE CORNELL NOTES TOPIC: NOTES: Summary: HTML Hypertext Markup Language 1 st and last tag on a page Tags Tags.

HTML CRASH COURSE. What is HTML?  Hyper Text Markup Language  The language used to make web pages  Written by using tags.

Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 

Explorers Guild April 27, What is HTML? Hypertext Markup Language (HTML) is the basic building block of the World Wide Web page. HTML files are.

What is Markup and Markup Languages? What is HTML? A Basic HTML Document Basic HTML Tags Tag Attributes and Text Formatting Tags Insert Hyperlinks Add.

XP 1 HTML Committed to Shaping the Next Generation of IT Experts. 01: Introduction to HTML.

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.

CS105 INTRODUCTION TO COMPUTER CONCEPTS HTML Instructor: Cuong (Charlie) Pham.

INTRODUCTORY Tutorial 1 Using HTML Tags to Create Web Pages.

HTML: Hyptertext Markup Language Doman’s Sections.

CPSC 203 Introduction to Computers Lab 33 By Jie Gao.

Introduction to HTML. HTML Introduction HTML – Hypertext Markup Language are the instructions that tell a browser how to lay out the information (text,

HTML HTML: Hypertext Markup Language. The basic language of the World Wide Web. Developed around 1991 at the CERN lab on the French-Swiss border by Tim.

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.

HTML GUIDE Press F5 and then Click on the links on the left to get to the section you want Section 1: Getting Started Section 2: Moving Banner Section.

Creating Your First Web Page – Topic: Creating a wiki, blog, image blog and podcast Click Arrow - Next Slide 1.

Informatics Computer School CS114 Web Publishing HTML Lesson 1.

Web Design Mr. Briggs’ Classes September 6-7, 2011.

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.

HTML BASIC IST 210: Organization of Data IST210 1.

Spiderman ©Marvel Comics Creating Web Pages (part 1)

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.

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.

Your HTML website creating your first html file. Creating an HTML FIle Open note pad from accessories, programs. Write code. Save and view. In 3 Steps.

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.

Introduction lab1. Suzanne J. Sultan 2 What is HTML? The definition of HTML is Hyper Text Markup Language. HTML is a computer language devised to allow.

HTML HTML stands for Hyper Text Markup Language. HTML is used in making the base of a Website You can just use an online website maker like weebly.com.

HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page.

McGraw-Hill Technology Education © 2004 by the McGraw-Hill Companies, Inc. All rights reserved. Office Word 2003 Working Together 1 Word 2003 and Your.

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.

1 HTML. 2 Full forms WWW – world Wide Web HTTP – Hyper Text Transfer Protocol HTML – Hyper Text Markup Language.

1 Introduction to HTML. 2 Definitions  W W W – World Wide Web.  HTML – HyperText Markup Language – The Language of Web Pages on the World Wide Web.

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.

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.

Online PD Basic HTML The Magic Of Web Pages

Computers and Information Systems

CSCI-235 Micro-Computers in Science

15.1 Fundamentals of HTML 2 assignments: 1—complete the worksheet

Presentation transcript:

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 graphics Let’s start with the basics

First Step in Web Design: Plan!  Create an outline  list of elements, links, graphics,  Do a “little bit”  Save – Test (Preview)  Do a little more  Save – Test (Preview)

HTML HyperText Markup Language All types of computers can interpret HTML code (PC, MAC, Linux, and Unix) In many languages

Where do I write HTML code? Any word processor will work!  We will use Notepad

Saving an HTML Document Must save file as:  Filename.htm OR  Filename.html

How does HTML Work? Series of tags that surrounds and controls text. Examples of tags: 

How does HTML Work? Tags: Code words or letters in designed to create what you see on a web page.

The Nomad Catalog The Nomad on-line catalog! Welcome to the Nomad Ltd on-line catalog. We are pleased to offer a new line of clothing called "Web Wear“! Enjoy browsing through our catalog! Order now to get Web Wear fast.

What should I know about Tags?? Not case sensitive  or Enclosed in brackets:  (Shift key + comma or period) To end a tag you must type: After an equal sign you need quotation marks. =“red”

Basic HTML Tags:  Identifies an HTML document to the browser  Document information

Basic HTML Tags:  Indicates what appears in the blue title bar  Information that appears in main portion of the display window.

The Body Tag Includes:  Text  Links  Graphics  Movies  Sounds  Animations

My Practice Page Welcome to my Practice Page! Info appears in title bar!

Text Color  Put text information inside the body tag  Changes color of text through entire document.  Note: HTML does not recognize all colors – use trial and error or the HTML color codes.

Background Color Or  Changes the documents background color

Background Color HTML color codes are hexadecimal triplets representing the colors red, green, and blue (#RRGGBB). For example, in the color red, the color code is #FF0000, which is '255' red, '0' green, and '0' blue. These color codes can be used to change the color of the background, text, and tables on a web page.

The Paragraph Tag Creates new Paragraph HTML will not recognize pressing the enter key No ending tag is needed

Six Heading (Font) Sizes Biggest Smallest

Text Styles BOLD UNDERLINE ITALICIZE

Ordered List: & Pepsi Dr. Pepper Mt. Dew Coke

Ordered List: & In Internet Explorer: 1. Pepsi 2. Dr. Pepper 3. Mt. Dew 4. Coke

Unordered (Bulleted) List: & Hamburger Pepperoni Cheese Veggie

Unordered (Bulleted) List: & In Internet Explorer: Hamburger Pepperoni Cheese Veggie

Linking Documents Links or hyperlinks  Allow you to jump to other Web sites  Displayed in a different color  Underlined  Mouse turns to a hand when held over link

Hyperlink Tag Link to a web page Type here what you want blue and underlined

Hyperlink Review Most commonly used search engine is Google ! In Internet Explorer: Most commonly used search engine is Google!

Inserting a Graphic All graphics must be saved to your Network Drive. Do not save to the desktop. Do not copy and paste.

Inserting a Graphic Image is saved in a Folder named Graphics Image filenames CAN BE case sensitive!

Key Tips Proofread! Proofread! Proofread!  Little errors cause big problems in HTML. “ “ Pay attention to detail! Keep your notes they will help you with your project.