More Basic HTML. Add spacing (single & double space) Save Refresh Add horizontal rule Add comments Add styles Add headings Add features Add alignments.

Slides:



Advertisements
Similar presentations
HTML II Formatting the Language of the Web Terry Bake
Advertisements

HTML Basics Customizing your site using the basics of HTML.
Session 2 Introduction to HyperText Markup Language 4 (HTML 4) Matakuliah: M0114/Web Based Programming Tahun: 2005 Versi: 5.
HTML popo.
Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
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.
Unit 3 Day 4 FOCS – Web Design. No Journal Entry.
Cascading Style Sheets
HTML popo.
INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.
End User Computing An Introduction to CSS Sujana Jyothi Research Lab1, Callan Building, Department of Computer Science
กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
Web Page Development Identify elements of a Web Page Start Notepad
HTML Introduction HTML
WEB PAGES: CREATING AND MAINTAINING ** Tom Keane & Mayis SeapanInstructors: HTML Tags to format your text.
Using color and fonts in HTML and XHTML Please use speaker notes for additional information!
HTML BASIC
HTML: PART ONE. Creating an HTML Document  It is a good idea to plan out a web page before you start coding  Draw a planning sketch or create a sample.
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.
Explanation of Web 6, Web 7 and Web 9 at my site Please be sure to bring up the speaker notes for the explanation Intro - Web 6, Web 7 and Web 9.
ULI101: XHTML Basics (Part III) Introduction to XHTML / Continued … Block-Level vs. Inline Elements (tags) Manipulating Text,  , Text Characteristics,,,,,,,,,,,,,,,
Basic XHTML Module 2: XHTML Basics LESSON 1. Module 2: XHTML Basics LESSON 1 Lesson Overview In this lesson, you will learn to:  Write XHTML code using.
HTML Overview Part 2 – Paragraphs, Headings, and Lines 1.
HTML HTML stands for "Hyper Text Mark-up Language“. Technically, HTML is not a programming language, but rather a markup language. Used to create web pages.
McGraw-Hill/Irwin Copyright © 2013 by The McGraw-Hill Companies, Inc. All rights reserved. Extended Learning Module F Building a Web Page with HTML.
DHTML AND JAVASCRIPT Genetic Computer School LESSON 2 HTML TAGS G H E F.
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.
More Basic XHTML Module 2: XHTML Basics LESSON 2.
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.
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
15.2 More Basic HTML. More Basic HTML Add spacing (single & double space) Save Refresh Add horizontal rule Add comments Add styles Add headings Add features.
Lesson 2 Adding more content to your web page. Thanks to Richard Hudnutt, Luella HS.
HTML Basic I IST2101. Keep In Mind Programming can be time consuming. Plan ahead!
Getting Started with HTML Please use speaker notes for additional information!
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.
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.
Enhancing Your Web Site—Adding Links Web Page **YOU MUST HAVE COMPLETED THE 1ST 3 WEB PAGES BEFORE YOU CAN DO THIS ONE. **YOU SHOULD HAVE COMPLETED THE.
HTML Basic IST2101. Keep In Mind Programming can be time consuming. Plan ahead!
College of Micronesia- FSM Pohnpei State Campus GEORGE S. MANGONON, MBA Chair, Math/Sci Division September 15-25, 2008.
Chapter 2 Web Page Design Mr. Gironda. Elements of a Web Page These are things that most web pages use.
College of Micronesia- FSM Pohnpei State Campus GEORGE S. MANGONON, MBA Chair, Math/Sci Division September 15-25, 2008.
L. Anne Spencer (c) 2001 Basic Web Design Document, text, & layout formatting tags & attributes.
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.
HTML. Hyper Text Markup Language Markup your text document The markup is the tag Hyper text means you can jump from place to place.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
Getting Started with HTML. HTML  Hyper Text Markup Language  HTML isn’t a program language, its known as a markup language  A Markup language has tags.
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.
Coding with HTML {. THE BASICS { What is HTML and how can you use it to make websites?
HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page.
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 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.
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.
Revised June 2008 Online PD Basic HTML1 Let’s Try It!  Open Notepad oStart > All Programs > Accessories > Notepad oDon’t get WordPad by mistake – won’t.
Basic Web Publishing M. Scott Gartner 7/15/98.
Let’s Try It! Open Notepad
HTML Basics.
What is HTML? Structure of HTML Document HTML TAG HEAD TAG TITLE TAG
HTML GUIDE Press F5 and then
CSCI-235 Micro-Computers in Science
Tag Basics.
What is HTML? Structure of HTML Document HTML TAG HEAD TAG TITLE TAG
HTML.
Enhance your website.
Computers and Scientific Thinking David Reed, Creighton University
15.2 More Basic HTML & CSS.
What is HTML? Structure of HTML Document HTML TAG HEAD TAG TITLE TAG
More Basic HTML 2 assignments: 1—complete the worksheet
Enhancing Your Web Site—Adding Links Web Page
Presentation transcript:

More Basic HTML

Add spacing (single & double space) Save Refresh Add horizontal rule Add comments Add styles Add headings Add features Add alignments Add font Add color Today you will learn how to…

Spacing Add white space to the Web Page which affects its structure, layout as well as helps with readability. A web browser is a free-form document meaning that any spaces or blank lines have no effect on the browser unless they are “TAGGED”.

On the Notepad, you can actually use the spacebar, return & tab keys to type the tags, text and the different sections. BUT the Browser will IGNORE all of this. – everything will be as 1 long single spaced line or paragraph. Spacing Continues

Spacing Tags: Line Break: isn’t a set, used to break the line without putting a space between the lines, acts like a Single Space. Paragraph: used to add space between paragraphs, acts like a Double Space. Horizontal Rule: isn't a set, adds a visible horizontal line, used to make sections. You can use as many spacing tags as needed.

Comment Tag When you want to add notes or comments to a section or the entire web page use this tag It doesn’t show up in the browser. Comments should be short. Can be used anywhere in the document.

Let’s Practice Adding Various Spacing

If needed, open both the browser and notepad of My1stWebPage.html After the 1 st sentence This is my very first “Web Page” type the following text from this & the next slide with each statement on a separate line and all before the closing tag: I think Web Design is a great thing to learn because… I've learned in Web Design that a br tag lets you create a… Line Break.

My name is {insert your name} and I go to {insert your name} High School. I am in the _?_ grade. I am learning to create web sites in IDT class and so far I have just learned the basic tags Now, it’s Time to Save & Learn to Refresh Click File  Save

How to View Changes

Refreshing the Browser to See the Changes 11 Switch to your My1stWebPage browser screen. You will notice none of the additional text you typed was added though you just saved. That’s because you must always Refresh the Browser each and every time you Save the Notepad. Click View Refresh

Let’s Practice Refreshing

Click the Refresh button or SELECT View Refresh

Wow, look at your web page!

Adding Some Style & Heading

Style Tags - bold text - underline text - italic text

Heading Tags Are used to separate text and introduce new topics, titles or subtitles on web pages. They’re Bold & Double Spaced. So, no need for, /p> or. Come in different sizes – Largest heading – – Average heading – – Smallest heading

Let’s Practice Adding Style & Heading Tags

Switch back to your Notepad and after the last you typed, add the following text: Heading 1 - Biggest Size Heading 2 Heading 3 – Average Heading 4 Heading 5 Heading 6- Smallest Size

Now, lets add some Style to the previously typed text: Put a on either side of “great” in the paragraph that starts “I think Web Design…” but before the Put an on either side of your name in the paragraph that starts “My name is_______...” but before the Put a on either side of the text “Heading 4” but before the Save the Notepad & Refresh the Browser

Don’t forget to Refresh your Browser to see the new changes.

Tags & Tags Features

Tags and Features (Add-Ons) Tags (singles or sets) will have Attributes or Features. Let’s call the tag features “Add-On’s”. Add-On’s allow tags to have additional features such as size, color, width, etc… Add-On’s will always go after the opening tag only and never in the closing tag, if it’s a set.

Changing the Appearance of the Horizontal Rule To Change the Width or Length – Thickness or Height - Alignment – Combine the add-on when needed -

Font and its “Add-ons” Font size ranges from is Tiny font 3 is normal - like Word size 12 7 is huge To change the Font Size text here

Font Face – changes the appearance of the font such as Arial or Comic Sans. text You can combine all of the font tag’s add-ons in one tag if they apply to the same text:

ALIGNING TEXT To Align using the Paragraph Tag: type here To Align using the Heading Tag: type here Centers anything text

Let’s Practice Changing Horizontal Rule and Font

Switch back to your Notepad. Now, pick one of the to change the width, size & alignment by adding the code below inside the : width=50% size=10 align=“right” Now Type Now Type: width=50% size=10 align=“right” on either side of “This is my very first “WEB PAGE”!!! Save the Notepad & Refresh the Browser

Adding Colors

What’s the Deal with Colors? Color can be added to every element on a web page. Many tags will use the “color” add-on to change the color. Can use the color’s name such as “blue” or the Hexadecimal such as #CCFF00 For example: White or #FFFFFF Black or # Red or #FF0000 Green or #00FF00 Blue or #0000FF Yellow or #FFFF00 Gray or #808080Purple or # Fuchsia or #FF00FFLime or #00FF00

Adding Color Web safe colors are provided on Color Charts b-safe.htmlhttp:// b-safe.html Coloring the Background a solid color

Adding Color Continues Coloring the Horizontal Rule Coloring All Words: Color Some Words, sentence or paragraph: Words Don’t forget that you can Combine

Let’s Practice Adding Colors Some Made up Colors might not work

Changing the Background Color Inside the tag type: bgcolor=“gray” Now try changing the “gray” to #FFB573 Now change it to whatever color you want. Changing the Body Color: Inside the but before the bgcolor add-on type: text=“white” Now change it to whatever color you want.

Change the Horizontal Rule: pick a to change the color by typing inside of it color=“blue” Change the Font Color, Size & Face: Add to the on either side of “I am learning to create web sites in IDT class” Save the Notepad & Refresh the Browser

your colors might be different

You Are Well On Your Way to Being an Excellent Web Master!

Quitting Notepad and a Browser 40 Click the Close button on the browser title bar Click the Close button on the Notepad window title bar

Recap Activity Tell your teacher when you have completed the web page Begin completing the Tags worksheet on my web page from the 1 st 2 PowerPoints. Save as instructed. Tags to Remember:,,,, -,,, Add-On’s color, size, width align, face, text, bgcolor