CSCI-235 Micro-Computers in Science

Slides:



Advertisements
Similar presentations
HTML Basics Customizing your site using the basics of HTML.
Advertisements

HTML popo.
HTML. The World Wide Web Protocols Addresses HTML.
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
HTML Computing Concepts HTML - An Introduction 1.
Web Page Development Identify elements of a Web Page Start Notepad
 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.
MA10126 Introduction to HTML Gavin Shaddick
Creating a Web Page HyperText Markup Language. HTML Documents  Created using any text editor  Notepad  Vi, Pico, or Emacs  If using word-processor,
HTML BASIC
1 Introduction to HTML. 2  W W W – World Wide Web.  HTML – HyperText Markup Language – The Language  of Web Pages on the World Wide Web. HTML is a.
Computer Science 101 HTML. World Wide Web Invented by Tim Berners-Lee at CERN, the European Laboratory for Particle Physics in Geneva, Switzerland (roughly.
CS105 Introduction to Computer Concepts HTML
Chapter 2: The Client Side: HTML CIS 275—Web Application Development for Business I.
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.
HTML (HyperText Markup Language)
McGraw-Hill/Irwin Copyright © 2013 by The McGraw-Hill Companies, Inc. All rights reserved. Extended Learning Module F Building a Web Page with HTML.
1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.
More Basic HTML. Add spacing (single & double space) Save Refresh Add horizontal rule Add comments Add styles Add headings Add features Add alignments.
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.
Getting Started with HTML Please use speaker notes for additional information!
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.
XP 1 HTML Committed to Shaping the Next Generation of IT Experts. 01: Introduction to HTML.
Just Enough HTML How to Create Basic HTML Documents.
Computer Information Technology – Section 3-4. HTML – The Language of the Internet Objectives: The Student will: 1. Look at HTML 2. Understand the basic.
INTRODUCTION. What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language,
CS105 INTRODUCTION TO COMPUTER CONCEPTS HTML Instructor: Cuong (Charlie) Pham.
HTML: Hyptertext Markup Language Doman’s Sections.
College of Micronesia- FSM Pohnpei State Campus GEORGE S. MANGONON, MBA Chair, Math/Sci Division September 15-25, 2008.
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.
College of Micronesia- FSM Pohnpei State Campus GEORGE S. MANGONON, MBA Chair, Math/Sci Division September 15-25, 2008.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page.
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 Web Publishing M. Scott Gartner 7/15/98.
Let’s Try It! Open Notepad
Online PD Basic HTML The Magic Of Web Pages
INTRO TO WEB DEVELOPMENT html
Basic HTML Tags Ryan Frazier April 30,2004 CSC113.
Introduction to HTML.
HTML Basics.
Extended Learning Module F
Section 4.1 Section 4.2 Format HTML tags Identify HTML guidelines
What is HTML? Acronym for: HyperText Markup Language
LAB Work 01 MBA 61062: E-Commerce
Introduction to basic HTML
Computer Fundamentals 2
Introduction to HTML.
Elements of HTML Web Design – Sec 3-2
HTML GUIDE Press F5 and then
Uppingham Community College
Creating a Home Page in HTML
Today’s topics Networks & the Internet Basic HTML
Elements of HTML Web Design – Sec 3-2
COMPUTING FUNDAMENTALS
A guide to HTML.
HTML Intro.
Computers and Scientific Thinking David Reed, Creighton University
Chapter 16 The World Wide Web.
Html.
Introduction to HTML.
HyperText Markup Language
HTML Basics Mr. Fazzalari.
MA10126 Introduction to HTML
Johan Ng and Muhammad Hazzry
Presentation transcript:

CSCI-235 Micro-Computers in Science HTML

HTML is a Markup Language HyperText Markup Language (HTML) Hypertext refers to the fact that Web pages are more than just text (e.g., can contain multimedia, provide links for jumping within & without) Markup refers to the fact that it works by augmenting text with special symbols (tags) that control formatting when the document is viewed by a special application (e.g., a Web browser interprets HTML)

HTML Editors HTML documents are basically ASCII text documents Any Word Processor, preferably Window’s Notepad can be used to create the necessary text Many high-level tools exist for creating Web pages (e.g., Microsoft FrontPage, Netscape Composer, etc…) Machine language vs. high-level language analogy

HTML Tags HTML specifies a set of tags that identify structure and content type Tags are enclosed in < > Most tags come in pairs, marking a beginning and an ending <b>Tags</b> Single Tags have a single tag and all the information required is contained within the single tag <IMG SRC="picture.gif" ALIGN="Left" >

HTML Elements An HTML element is an object enclosed by a pair of tags <title> My Home Page</title> is a TITLE element <b> This text appears bold.</b> is a BOLD element An HTML document is a collection of elements

Structural Elements An HTML document has two main structural elements HEAD contains setup information for the browser & the Web page (e.g., the title for the browser window, etc…) BODY contains the actual content to be displayed in the Web page HTML documents begin and end with <html> and </html> tags Comments appear between <!-- and --> HEAD section enclosed between <head> and </head> BODY section enclosed between <body> and </body> <html> <!–- Version information -- -- File: sample1.html -- --> <head> <title>My first HTML document</title> </head> <body> Hello world! </body> </html>

Opening and Closing Tags Start all pages with these tags: <html> <head> <title> </title> </head> <body> End all pages with these tags: </body> </html>

Text to form the body of the message <html> <head> <title> Text here appears in browser title bar </title> </head> <body> Text to form the body of the message </body> </html>

Headings Headings serve as headlines for a document There are six (6) levels of header tags. Level 1 is the largest and boldest, Level 6 is the smallest Headings can also include placement information inside the tag For Example: <h1 align="center"> text here </h1> Or: <h1 align="right"> text here </h1>

Paragraphs HTML does not recognize carriage returns or enters, you will need to add a Paragraph tag The paragraph tag is <p> and the closing tag is a </p> NOTE: To get the look of a <p> paragraph tag without really using one, you may choose to use two (2) break tags <br> together

Line Breaks & Paragraphs The <br> tag leaves normal spacing between lines, whereas the <p> tag leaves 2 to 3 times the space This sentence represents the spacing between <br> lines with the break tag This sentence represents the spacing between <p> lines with the paragraph tag

Justified Text in Paragraphs Use the <p align=“justify”>Text </p> tags (SEE SAMPLE HTML PAGE #1)

Listing Items on a Web Page Adding lists to your Web page Bullets called Unordered Lists <ul> Numbered lists called Ordered Lists <ol>

Unordered Lists <ul> When you want to make a bulleted list do the following: Use the <ul> tag as in the following example: <ul> <li> How </li> = l How <li> Now </li> = l Now <li> Brown </li> = l Brown <li> Cow </li> = l Cow </ul>

Ordered Lists <ol> When you want to make a numbered list to drive your point home, do the following: Use the <ol> tag as in the following example: <ol> <li> How </li> = 1. How <li> Now </li> = 2. Now <li> Brown </li> = 3. Brown <li> Cow </li> = 4. Cow </ol>

Colors The color of the background and text of a document can be defined using tags Colors can either be defined with their values in hex (e.g. #FF0000 for red) or by the use of one of the sixteen predefined colors (Black, White, Silver, Gray, Red, Maroon, Lime, Green, Blue, Navy, Magenta, Purple, Yellow, Olive, Cyan, and Teal) If you want red try <font color=red>This is red</font>

Style This is how you ask for a <b>bold font</b> This is how you ask for an <i>italic font</i> <u>underlined font</u>

Using Images <IMG SRC="image.location"> <IMG SRC="image.location" WIDTH=135 HEIGHT=200> <IMG SRC="image.location" ALIGN=Right> <BODY BACKGROUND="image.location">  (SEE SAMPLE HTML PAGE #2)

Adding Links <a href="location">Text that is underlined to indicate a link</a> (SEE SAMPLE HTML PAGE #3)

Writing Your Own Page Start Notepad by clicking on the Start button, Programs, Accessories, then Notepad Anything you save on your W: disk is accessible to the outside world by the StFx Web server. But what is your URL? If your login id is, for example, x2005abc, your URL is http://www.stfx.ca/people/x2005/x2005abc Name your HTML file index.html