html presentation ppt free download

Introduction to HTML

Sep 28, 2014

1.49k likes | 2.05k Views

Introduction to HTML. Lora Budzier Senior Internet Specialist [email protected]. Agenda. Introduction Tools Coding Basics Structuring Text Adding Functionality Formatting Text. Introduction. HyperText Markup Language (HTML)

Share Presentation

ordered lists
web page title
title united states patent

Presentation Transcript

Introduction to HTML Lora Budzier Senior Internet Specialist [email protected]

Agenda • Introduction • Tools • Coding Basics • Structuring Text • Adding Functionality • Formatting Text

Introduction • HyperText Markup Language (HTML) • Text Files With Codes That Change the Layout, Add Images, or Creates Links to Other Pages

Tools • Text Editor • Notepad, WordPad • Microsoft FrontPage • Macromedia Dreamweaver • Adobe GoLive

Coding Basics • HTML Tag • HEAD Tag • TITLE Tag • META Tag • BODY Tag • Content

Coding Basics • HTML Tag • Opens and Closes an HTML Document

Coding Basics <html> </html>

<html> <head> </head> </html> Coding Basics • HEAD Tag • Information Not Displayed On-Screen • Contains Document Information (i.e., Title and Keywords)

Insert the HEAD Tags in Between the HTML Tags <html> </html> Coding Basics <head> </head>

<html> <head> <title> </title> </head> </html> Coding Basics • TITLE Tag • Required in All HTML Documents • Used to Identify Contents of Document • Avoid Generic Titles

Insert the TITLE Tags Within the HEAD Tags <html> <head> </head> </html> Coding Basics <title>My First Web Page</title>

Generic Title <html> <head> <title>Home Page</title> </head> </html> Specific Title <html> <head> <title>United States Patent and Trademark Office Home Page</title> </head> </html> Coding Basics

Coding Basics • META Tag • Used to Store Browser and Search Engine Information • Descriptions • Keywords • Cache Information • Indexing • Sets the Character Set for a Document

<html> <head> <title> </title> <meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1”> </head> </html> Coding Basics

<html> <head> <title>My First Web Page</title> </head> <body> </body> </html> Coding Basics • BODY • Contains Document Content

Insert the BODY Tags After the Closing HEAD Tag <html> <head> <title>My First Web Page</title> </head> </html> Coding Basics <body> </body>

<html> <head> <title>My First Web Page</title> </head> <body>  </body> </html> Structuring Text • Comments • Used by Designer to Denote Information • Information Not Displayed On-Screen

<html> <head> <title>My First Web Page</title> </head> <body> </body> </html> Insert COMMENT Tags Within the HTML Tags Structuring Text

Structuring Text • Headings • Start and End Tags are Required • Headings Should Briefly Describe the Section it Introduces • Each Level has Different Attributes • H1 is the largest • H6 is the smallest

<html> <head> <title>My First Web Page</title> </head> <body> <!—Below is the content of the page--> </body> </html> Insert HEADING Tags Within the BODY Tags Structuring Text <h1>This is heading 1.</h1> <h2>This is heading 2.</h2> <h3>This is heading 3.</h3> <h4>This is heading 4.</h4> <h5>This is heading 5.</h5> <h6>This is heading 6.</h6>

In the File Menu, Select Save As Enter a Name in the File Name Field, Using the .htm File Extension Select All Files From the Drop Down Type Menu <html> <head> <title>My First Web Page</title> </head> <body> <!—Below is the content of the page--> </body> </html> TC2600_TechFair Structuring Text <h1>This is heading 1.</h1> <h2>This is heading 2.</h2> <h3>This is heading 3.</h3> <h4>This is heading 4.</h4> <h5>This is heading 5.</h5> <h6>This is heading 6.</h6> firstpage.htm

Locate and Double Click on the HTML File to View the Webpage Note the Location of the Title When Displayed in the Browser Structuring Text

Structuring Text • Paragraphs • Discourage the Use of Empty Paragraph Tags • Start Tag Required • End Tag Optional • Line Breaks • Start Tag Required • End Tag Forbidden

<html> <head> <title>My First Web Page</title> </head> <body>  <p>Text tends to be formatted in paragraphs and on occasion extra space is desired between paragraphs or in specific places. <br> <p>Line breaks are good for that!</p> </body> </html> Structuring Text

Structuring Text

Structuring Text • Lists • Ordered (Numbered) Lists • Start and End Tags Required • Unordered (Bulleted) Lists • Start and End Tags Required] • List Items • Start Tag Required • End Tag Optional

<body>  <p>Ordered Lists <ol> <li>Apple</li> <li>Banana</li> <li>Carrot</li> </ol> <p>Unordered Lists <ul> <li>Clothing </li> <li>Kayak </li> <li>Food </li> </ul> </body> Structuring Text

<body>  <p>Ordered Lists <ol> <li>Food</li> <ul> <li>Apple</li> <li>Banana</li> <li>Carrot</li> </ul> </ol> </body> Structuring Text • Nested Lists

Structuring Text • Basic Tables • Attributes • Border • Cellspacing • Cellpadding • Width • Headers

<html> <head> <title>My First Web Page</title> </head> <body>  <table> <tr> <td>Cell content</td> </tr> </table> </body> </html> Structuring Text

<table border=“1”> <tr> <td>Cell content</td> </tr> </table> Structuring Text • Border • Draws Table Lines

A One Pixel Border Around the One Row One Column Table Structuring Text

<table border=“1”> <tr> <td>Cell Content Row 1</td> </tr> <tr> <td>Cell Content Row 2</td> </tr> </table> Structuring Text • Adding Rows

A One Pixel Border Around the Two Row One Column Table Structuring Text

<table border=“1”> <tr> <td>Cell Content Column 1</td> <td>Cell Content Column 2</td> </tr> <tr> <td>Cell Content Column 1</td> <td>Cell Content Column 2</td> </tr> </table> Structuring Text • Adding Columns

A One Pixel Border Around the Two Row Two Column Table Structuring Text

<table border=“1” cellspacing=“10”> <tr> <td>Cell Content Column 1</td> <td>Cell Content Column 2</td> </tr> <tr> <td>Cell Content Column 1</td> <td>Cell Content Column 2</td> </tr> </table> Structuring Text • Cellspacing • Space Between Cells

A Ten Pixel Space Between the Two Rows and Columns Structuring Text

<table border=“1” cellspacing=“10” cellpadding=“10”> <tr> <td>Cell Content Column 1</td> <td>Cell Content Column 2</td> </tr> <tr> <td>Cell Content Column 1</td> <td>Cell Content Column 2</td> </tr> </table> Structuring Text • Cellpadding • Distance Between the Cell and Its Content

A Ten Pixel Space Between the Cell and its Content Structuring Text

Structuring Text • Width • Absolute Values • Maintains Width No Matter the Browser Size • Relative Values • Resizes with the Browser

<table border=“1” cellspacing=“10” cellpadding=“10” width=“600”> <tr> <td>Cell Content Column 1</td> <td>Cell Content Column 2</td> </tr> <tr> <td>Cell Content Column 1</td> <td>Cell Content Column 2</td> </tr> </table> Structuring Text • Absolute

An Absolute Table Remains the Same Width No Matter the Browser Window Size Structuring Text

<table border=“1” cellspacing=“10” cellpadding=“10” width=“100%”> <tr> <td>Cell Content Column 1</td> <td>Cell Content Column 2</td> </tr> <tr> <td>Cell Content Column 1</td> <td>Cell Content Column 2</td> </tr> </table> Structuring Text • Relative

A Relative Table Changes to the Width of the Browser Window Structuring Text

<table border=“1” cellspacing=“10” cellpadding=“10” width=“100%”> <tr> <th>Cell Content Column 1</th> <th>Cell Content Column 2</th> </tr> <tr> <td>Cell Content Column 1</td> <td>Cell Content Column 2</td> </tr> </table> Structuring Text • Column Headers

A Default Table Header Displays Bold and Centered Structuring Text

More by User

Introduction to HTML. Contents Getting Started.. What is HTML? How to create and View an HTML document? Basic HTML Document Format The HTML Basic tags. What the following term mean : Web server: a system on the internet containg one or more web site

587 views • 15 slides

Introduction to HTML. Today’s Discussion. What is HTML ? What is Web Page ? Web Server Web Browser What is Internet ? Services Provided by Internet e-mail, ftp, wiki- pedia , blogs, java applets Tools used in creating Web Pages HTML coding …… using an editor. What is HTML ? .

634 views • 44 slides

Introduction to HTML. Vincci Kwong Reference/Instruction Librarian. What is HTML?. H yper T ext M arkup L anguage A markup language designed for the creation of web pages and other information viewable in a browser The basic language used to write web pages File extension: .htm, .html.

1.43k views • 113 slides

Introduction to HTML. OMT II Mam Saima Gul. 3. HTML files return to client. 1. Client requests web pages. Client computer. Web server. Static web page a web page with contents that remain fixed and unchanged once it has been created by the author.

540 views • 26 slides

eXtensible Markup Language (XML). Tutorial 1. Introduction to HTML. Contents. Internet World Wide Web Hypertext Documents Web Pages and Web Browsers HTML: The Language of the Web Versions of HTML. 1. Internet.

290 views • 12 slides

Introduction to html

Introduction to html . ENGL 307 March 28 th , 2012 . What is HTML? . Hyper Text Markup Language. What is this sorcery? . HTML is made up of elements These elements indicate structure Structure and content are two separate monsters

295 views • 10 slides

Introduction to HTML. Objectives. Describe tools used to create HTML documents Discuss five phases of the Web development life cycle Describe Web site design and the purpose of each Web sites structure. Tools for Creating HTML Documents. Tools for Creating HTML Documents.

331 views • 13 slides

Introduction to HTML. Simple facts yet crucial to beginning of study in fundamentals of web page design! . Objectives. Describe the Internet and its associated key terms Describe the World Wide Web and its associated key terms Identify the types and purposes of Web sites

528 views • 19 slides

Introduction to HTML. Dave Edsall IAGenWeb County Coordinator’s Conference June 30, 2007. H yper T ext M arkup L anguage. What is markup ? Editors used to physicly mark-up a document with changes and typesetting instructions Computers came along and used programs (languages)

511 views • 36 slides

Introduction to HTML. HTML Tag Basics. HTML. HTML – Hyper Text Mark-Up Language HTML is a set of mark-up symbols (or codes) placed in a file intended for display in a web browser. Each individual mark-up code is referred to as an element or tag. What Happens?. Open a Notepad document

748 views • 9 slides

Introduction to HTML. Wah Yan College (Hong Kong) Mr. Li C.P. Introduction to HTML. What is an HTML File? HTML stands for H yper T ext M arkup L anguage An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page

436 views • 15 slides

Introduction to HTML. CPS470 Software Engineering Fall 1998. Objectives. Learn how to create a simple web page: HTML documents. Necessary parts of an HTML document. Common HTML tags. Creating lists. Linking and graphics. Display a text file as-is. HTML Document.

357 views • 10 slides

Introduction to HTML . 2006 CIS101. What is the Internet?. Global network of computers that are connected and communicate via a series of Protocols Protocols are rules that specify the transmission of data. Internet protocols.

410 views • 18 slides

Introduction to HTML. Browser display. HTML Code. I want to emphasize this!. The difference between HTML code and a browser display:. I want to <b>emphasize</b> this!. What are Tags ?. I want to <b>emphasize</b> this!.

406 views • 17 slides

Introduction to HTML . 2005 CIS101. What is the Internet?. Global network of computers that are connected and communicate via a series of Protocols Protocols are rules that specify the transmission of data. Internet protocols.

415 views • 19 slides

Introduction to HTML. Is there a difference between the Internet and the Web. Internet  is a network of connected computers that spans the globe. These computers are connected together to share information.

1.8k views • 11 slides

Introduction to HTML. HTML. Hyper-Text Markup Language: the foundation of the World-Wide Web Design goals: Platform independence: pages can be viewed using a variety of different computers and browsers.

750 views • 16 slides

What is HTML? HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language; HTML describes the structure of Web pages using markup; HTML elements are the building blocks of HTML pages; HTML elements are represented by tags; HTML tags label pieces of content ... I found this website to be useful for learning HTML. Have a look at the site. Hope it helps. http://professional-guru.com/

406 views • 23 slides

Introduction to HTML. UNIT II. III B.COM(IT) B. Prepared By Dr. D. Vanitha , Associate Professor, Dept of B.Com (IT). Using HTML Tables. Defining a Table Structure. The first step to creating a table is to specify the table structure: the number of rows and columns

1.43k views • 123 slides

expansion of html, Html in Web page creation

517 views • 27 slides

My presentations

Auth with social network:

Download presentation

We think you have liked this presentation. If you wish to download it, please recommend it to your friends in any social system. Share buttons are a little bit lower. Thank you!

Presentation is loading. Please wait.

Basics of HTML.

Published by Magdalene West Modified over 9 years ago

Presentation on theme: "Basics of HTML."— Presentation transcript:

Intro to HTML. HTML HTML = HyperText Markup Language Used to define the content of a webpage HTML is made up of tags and attributes Content.

Introduction to HTML & CSS

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

Website Design.

CSS The basics { }. CSS Cascading Style Sheets - language used to – describe html appearance & formatting Style Sheet - file that describes – how html.

XHTML Basics.

Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.

Made by: Dan Ye. Introduction Basic Last Page ☆ HTML stands for Hyper Text Markup Language; ☆ HTML is not a programming language, it is a markup language;

4.01 Cascading Style Sheets

Basic HTML Workshop LIS Web Team Fall What is HTML? Stands for Hyper Text Markup Language Computer language used to create web pages HTML file =

Chapter 14 Introduction to HTML

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.

Understanding HTML Style Sheets. What is a style?  A style is a rule that defines the appearance and position of text and graphics. It may define the.

Review HTML  What is HTML?  HTML is a language for describing web pages.  HTML stands for Hyper Text Markup Language  HTML is not a programming language,

STYLING THE WEBSITE - EXTERNAL CSS BY JORGE MARTINEZ.

Cascading Style Sheets (CSS) 1.  What is CSS?  Why CSS?  How to write a CSS? 2.

About project

Preferences

An Introduction to HTML - PowerPoint PPT Presentation

An Introduction to HTML

Html stands for hyper text markup language, a language with set of markup tags to describe web pages. an html file must have an .htm or .html file extension. html is comprised of “elements” and “tags” that begins with and ends with . – powerpoint ppt presentation.

A markup language is a set of markup tags
What Is HTML?
Markup language for describing web pages
HTML stands for Hyper Text Markup Language, a language with set of markup tags
Documents are described by HTML tags
Each HTML tag describes different document content
An HTML file must have an .htm or .html file extension
HTML files can be created with text editors
NotePad, NotePad , PSPad
Or HTML editors (WYSIWYG Editors)
Microsoft FrontPage
Macromedia Dreamweaver
Netscape Composer
Microsoft Word
Visual Studio
HTML is comprised of elements and tags
Begins with lthtmlgt and ends with lt/htmlgt
Elements (tags) are nested one inside another
Tags have attributes
HTML describes structure using two main sections ltheadgt and ltbodygt
The HTML source code should be formatted to increase readability and facilitate debugging
Every block element should start on a new line
Every nested (block) element should be indented
Browsers ignore multiple whitespaces in the page source, so formatting is harmless
For performance reasons, formatting can be sacrificed
An HTML element consists of an opening tag, a closing tag and the content inside.
Hyperlink tags
Text formatting tags
Tags can have attributes
Attributes specify properties and behavior
Few attributes can apply to every element
Id, style, class, title
The id is unique in the document
Content of title attribute is displayed as hint when the element is hovered with the mouse
Some elements have obligatory attributes
Heading Tags (h1 h6)
Paragraph Tags
Sections div and span
HTML documents must start with a document type definition (DTD)
It tells web browsers what type is the served code
Possible versions HTML 4.01, XHTML 1.0 (Transitional or Strict), XHTML 1.1, HTML 5
See http//w3.org/QA/2002/04/valid-dtd-list.html for a list of possible doctypes
Contains information that doesnt show directly on the viewable page
Starts after the lt!doctypegt declaration
Begins with ltheadgt and ends with lt/headgt
Contains mandatory single lttitlegt tag
Can contain some other tags, e.g.
lt!- comments --gt
Title should be placed between ltheadgt and lt/headgt tags
Used to specify a title in the window title bar
Search engines and people rely on titles
The ltbodygt section describes the viewable portion of the page
Starts after the ltheadgt lt/headgt section
Begins with ltbodygt and ends with lt/bodygt
Text formatting tags modify the text between the opening tag and the closing tag
Ex. ltbgtHellolt/bgt makes Hello bold
Link to a document called form.html on the same server in the same directory
Link to a document called parent.html on the same server in the parent directory
Link to a document called cat.html on the same server in the subdirectory stuff
Inserting an image with ltimggt tag
Image attributes
Block elements add a line break before and after them
ltdivgt is a block element
Other block elements are lttablegt, lthrgt, headings, lists, ltpgt and etc.
Inline elements dont break the text before and after them
ltspangt is an inline element
Most HTML elements are inline, e.g. ltagt
ltdivgt creates logical divisions within a page
Block style element
Used with CSS
Inline style element
Useful for modifying a specific portion of text
Don't create a separate area (paragraph) in the document
Very useful with CSS
Tables represent tabular data
A table consists of one or several rows
Each row has one or more columns
Tables comprised of several core tags
lttablegtlt/tablegt begin / end the table
lttrgtlt/trgt create a table row
lttdgtlt/tdgt create tabular data (cell)
Tables should not be used for layout. Use CSS floats and positioning styles instead
Single-line text input fields
Multi-line textarea fields
Hidden fields contain data not shown to the user
Often used by JavaScript code
HTML is the universal markup language for the Web
HTML lets you format text, add graphics, create links, input forms, frames and tables, etc., and save it all in a text file that any browser can read and display
The key to HTML is the tags, which indicates what content is coming up
DOCTYPE declaration for HTML5 is very simple
Use lt!DOCTYPE htmlgt instead of lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN "http//www.w3.org/TR/xhtml1/DTD/xhtml1-transition al.dtd"gt
It uses UTF-8 and you define it with just one meta tag ltmeta charset"UTF-8"gt
HTML5 new Supported Application Programming Interfaces
Geolocation - Now visitors can choose to share their physical location with your web application
Drag and drop - Drag and drop the items from one location to another location on a the same webpage.
Persistent Local Storage - To achieve without resorting to third-party plug-ins.
Web Workers - A next-generation bidirectional communication technology for web applications.
Server-Sent Events - HTML5 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE)
Removed Elements in HTML5
New Semantic/Structural Elements in HTML5
New Form Elements in HTML5
New Graphics Media Elements in HTML5
New Input Types in HTML5
Input Types color,date,datetime,datetime-local,em ail,month,number,range,search,tel,time,url,week
InputAttributeautocomplete,autofocus,form,formact ion,formenctype,formmethod,formnovalidate,formtarg et,height and width, list, multiple, min and max, placeholder, step, required
New syntax in HTML5
This example demonstrates the different syntaxes used in an ltinputgt tag
Empty ltinput type"text" value"John" disabledgt
Unquoted ltinput type"text" valueJohngt
Double-quoted ltinput type"text" value"John Doe"gt
Single-quoted ltinput type"text" value'John Doe'gt
In HTML5, all four syntaxes may be used, depending on what is needed for the attribute.
Thank You..

PowerShow.com is a leading presentation sharing website. It has millions of presentations already uploaded and available with 1,000s more being uploaded by its users every day. Whatever your area of interest, here you’ll be able to find and view presentations you’ll love and possibly download. And, best of all, it is completely free and easy to use.

You might even have a presentation you’d like to share with others. If so, just upload it to PowerShow.com. We’ll convert it to an HTML5 slideshow that includes all the media types you’ve already added: audio, video, music, pictures, animations and transition effects. Then you can share it with your target audience as well as PowerShow.com’s millions of monthly visitors. And, again, it’s all free.

About the Developers

PowerShow.com is brought to you by CrystalGraphics , the award-winning developer and market-leading publisher of rich-media enhancement products for presentations. Our product offerings include millions of PowerPoint templates, diagrams, animated 3D characters and more.