Introduction to the Internet

Slides:



Advertisements
Similar presentations
HTML popo.
Advertisements

Web Development & Design Foundations with XHTML
Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
HTML: HyperText Markup Language Hello World Welcome to the world!
WeB application development
INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.
XHTML Basics.
CM143 - Web Week 2 Basic HTML. Links and Image Tags.
Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
Chapter 14 Introduction to HTML
Basics of HTML Shashanka Rao. Learning Objectives 1. HTML Overview 2. Head, Body, Title and Meta Elements 3.Heading, Paragraph Elements and Special Characters.
CpSc 462/662: Database Management Systems (DBMS) (TEXNH Approach) HTML Basics James Wang.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
HTML. What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language.
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.
HTML HyperText Markup Language Constantly evolving - extra facilities being added regularly Java applets and JavaScript used to increase functionality.
HTML Lecture 2.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
HTML history, Tags, Element. HTML: HyperText Markup Language Hello World Welcome to the world!
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.
Using Html Basics, Text and Links. Objectives  Develop a web page using HTML codes according to specifications and verify that it works prior to submitting.
All Web pages are written with some form of HTML (HyperText Markup Language). HTML documents are saved as Text Only files so virtually any computer can.
HTML INTRODUCTION, EDITORS, BASIC, ELEMENTS, ATTRIBUTES.
HTML. WHAT IS HTML HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
Introduction to HTML. What is HTML? Hyper Text Markup Language (HTML) is a language for describing web pages. HTML is not a programming language, it is.
INTRODUCTORY Tutorial 1 Using HTML Tags to Create Web Pages.
CSC 330 E-Commerce Teacher Ahmed Mumtaz Mustehsan Ahmed Mumtaz Mustehsan GM-IT CIIT Islamabad GM-IT CIIT Islamabad CIIT Virtual Campus, CIIT COMSATS Institute.
HTML: Hyptertext Markup Language Doman’s Sections.
Ali Alshowaish. What is HTML? HTML stands for Hyper Text Markup Language Specifically created to make World Wide Web pages Web authoring software language.
Web Development & Design Foundations with XHTML Chapter 2 HTML/XHTML Basics.
HTML BTEC National in Computing Section5. Create Information “HTML: defining HTML, discussing HTML uses and demonstrating HTML basics, HTML structure…..
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
WEEK -1 ACM 262 ACM 262 Course Notes. HTML What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML.
HTML HYPER TEXT MARKUP LANGUAGE. INTRODUCTION Normal text” surrounded by bracketed tags that tell browsers how to display web pages Pages end with “.htm”
What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page.
INT222 – Internet Fundamentals
Hyper Text Markup Language.  My First Heading My first paragraph. Example Explained The DOCTYPE declaration defines the document type The text between.
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.
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 1 Using HTML to Create Web Pages.
HTML Structure & syntax
HTML Structure & syntax
Lab 3 Html basics.
Basic concepts of web design
HTML Basics.
HTML5 Basics.
Web Development Part 1.
Web Development & Design Foundations with HTML5 8th Edition
HTML: HyperText Markup Language
Chapter A - Getting Started with Dreamweaver MX 2004
Uppingham Community College
XHTML Basics.
Web Development & Design Foundations with HTML5 8th Edition
Chapter 1: Introduction to XHTML (part 1)
Introduction to XHTML.
HTML Vocabulary.
WEBSITE DESIGN Chp 1
XHTML Basics.
XHTML Basics.
Introduction to HTML- Basics
XHTML Basics.
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
XHTML Basics.
HTML Structure & syntax
Lesson 2: HTML5 Coding.
Presentation transcript:

Introduction to the Internet Lecture 2 HTML Dr. Abeer Alnuaim Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh HTML Is a markup language NOT a programming language (set of Web Programming standardized codes) Used to create Web pages with Hyperlinks. Hyperlinks Connect pages together. Development of Internet Application 1501CT - Sara Almudauh

What is an HTML document? It is a Plain-text files (also known as ASCII) that contains the markup tags. An HTML file is created using any text editor (e.g.: TextEdit on Macintosh, Notepad on a Windows machine). You do not need an Internet connection to compose and view HTML pages. The World Wide Web Consortium (http://w3c.org) sets the standards for HTML and its related languages. Development of Internet Application 1501CT - Sara Almudauh

What can we do with HTML Document? we can, Publish online documents with headings, text, tables, lists, photos, etc. Retrieve online information via hypertext links, at the click of a button. Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc. Include spread-sheets, video clips, sound clips, and other applications directly in their documents. All computer platforms can understand it. Web pages created on a PC can be viewed, for example, on a Macintosh or a Unix computer. Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh Basic HTML Editors There are many ways to write HTML code. It can be done using an Editor Like: Notepad in Windows. TextEdit in MAC. OR by using a professional integrated development environment (IDE) like: Adobe Dreamweaver Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh Notepad To start Notepad go to: Start  All Programs  Accessories  Notepad Create a shortcut on your desktop for a quick access Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh Better Editors That can give you Syntax Highlighting and Syntax Folding are: Notepad++ in Windows. TextWrangler in MAC Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh Notepad++ Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh Website Files Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh HTML 5 Newest draft version of HTML/XHTML Supported by modern browsers Safari, Google Chrome, Firefox, Internet Explorer 9 Intended to be backwards compatible Adds new elements Adds new functionality Edit form data Native video and audio And more! Development of Internet Application 1501CT - Sara Almudauh

Writing HTML Basic Syntax Elements are defined by tags (markers). Tags are keywords surrounded by angle brackets. Tag format: - Opening tag: <name> - Closing tag: </name> Tags normally come in pairs <b>...</b> The opening tag and its closing tag together specify a container for the content they enclose Development of Internet Application 1501CT - Sara Almudauh

Actual content appears in webpage. It could be empty HTML Syntax HTML syntax: two-sided tag: <tag attributes>document content</tag> Closing tag Starting tag Properties of the tag. Optional! Actual content appears in webpage. It could be empty Examples: <p> CGS 2100 </p> Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh Basic Syntax Not all tags have content - If a tag has no content, its form is <name /> The container and its content together are called an element If a tag has attributes, they appear between its name and the right bracket of the opening tag Development of Internet Application 1501CT - Sara Almudauh

HTML Element An HTML element is everything from the start tag to the end tag <head> Element content </head> Element start tag/ opening tag. Element Element end tag/ closing tag. Some HTML elements have empty content which are closed in the start tag. Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh Basic Syntax In XHTML, element and attribute names must be in all lowercase letters In HTML, they can be any combination of uppercase and lowercase Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh Commenting Your Files You might want to include comments in your HTML files. Comments in HTML are like comments in a computer program—the text you enter is not used by the browser in any formatting and is not directly viewable by the reader just as computer program comments are not used and are not viewable. Comments such as the name of the person creating the file, the software and version used in creating a file, or the date that a minor edit was made are the norm. To include a comment, enter: <!-- your comments here --> You must include the exclamation mark and the hyphens as shown. Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh HTML Tags In HTML there are two major types of markup tags: – Empty tags are used for page formatting. They have no closing tag and so doesn’t enclose any text. – Container tags are used to manipulate or control the contents placed within them. They have a starting tag and an ending tag (/ slash preceding the tag). Development of Internet Application 1501CT - Sara Almudauh

The Minimal HTML Document Each document consists of head and body text. The head contains the title, and the body contains the actual text that is made up of paragraphs, lists, and other elements. <!DOCTYPE html> <html> <head> </head> <body> </body> </html> This tells your browser that this is an HTML tag This identifies the first part of your HTML-coded document that contains the title. This identifies the body part of your HTML-coded document. Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh HTML file HTML Files Extensions Filename.htm Filename.html Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh Meta Tags Used by Browsers and search engine and how your site info is displayed in the search results. <meta> tags always go inside the <head> element. Suggested Meta tags to include: charset, description, keywords, author and refresh. Useful resource: http://www.youtube.com/watch?v=aTaIMu01_bc Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh Meta Tags <head> <meta charest=“utf-8”> <meta name=“description” content=“Course Code CT1501”> <meta name=“keywords” content=“Web development, KSU”> <meta name=“author” content=“author‘s name”> <title>web development class web page</title> </head> Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh Start with a Title Every HTML document needs a title. Here is what you need to type in the header part of your HTML document: <title> My Home Page </title> Development of Internet Application 1501CT - Sara Almudauh

A basic HTML5 web page template <! DOCTYPE html> <html lang=“en”> <head> <title> </title> <meta charest=“utf-8”> </head> <body> </body> </html> The DTD (Document type definition). Always first line, identifies the type of the markup language. Optional, specifies spoken language of the document Describes the characteristic of the webpage. Utf-8 is widely supported by the browser Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh Basic Text Markup Text is normally placed in paragraph elements The <p> tag defines a paragraph. The <p> tag breaks the current line and inserts a blank line. Browsers automatically add some space (margin) before and after each <p> element. The new line gets the beginning of the content of the paragraph Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh HTML Paragraphs Source Code <!DOCTYPE html> <html> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html> Result Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh Empty Tags An empty tag means that it has no end tag (No closing tag!) The Line break <br> tag Inserts a single line break.  Causes the next element or text to display on a new line. XHTML syntax: <br /> HTML syntax: <br> Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh Empty Tags Horizontal Rules <hr> The <hr> tag In HTML5, the <hr> tag defines a thematic break. A horizontal rule is useful to separate major sections of your document. XHTML syntax: <hr /> HTML syntax: <hr> You will format this in CSS in later lectures Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh Example Source Code Result Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh HTML Headings Six sizes, 1 - 6, specified with <h1> to <h6> 1, 2, and 3 use font sizes that are larger than the default font size 4 uses the default size 5 and 6 use smaller font sizes Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh HTML Headings Source Code Result <!DOCTYPE html> <html> <body> <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> </body> </html> Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh Font Font Styles and Sizes (can be nested) Emphasis - <em> (often set in italics) Strong - <strong> (often set in boldface) Monospace - <code> (often set in Courier) Superscripts and subscripts Subscripts with <sub> Superscripts with <sup> For other styles and fonts use CSS (we’ll get to that later) Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh HTML Formatting Source Code Result <!DOCTYPE html> <html> <body> <p><h1> Web development, First lecture </h1></p> <p><b>This text is bold</b></p> <p><strong>This text is strong</strong></p> <p><i>This text is italic</i></p> <p><em>This text is emphasized</em></p> <p><code>This is computer output</code></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p> </body> </html> Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh HTML Attributes HTML elements can have attributes Attributes define an element Attributes are always specified in the start tag All attributes are made up of two parts: a name and a value -The name is the property you want to set - The value is what you want the value of the property to be Example: <p id= “top”>First Paragraph</p> *Find more attributes Development of Internet Application 1501CT - Sara Almudauh

HTML Links Source Code Result King Saud University’s Website The HTML <a> tag defines a hyperlink. href (hyperlink reference) is an attribute to specify a URL for the page Source Code <a href="http://www.ksu.edu.sa">King Saud University’s Website</a> indicates the link’s destination The URL The link’s Text Result King Saud University’s Website Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh HTML Links By default, links will appear as follows in all browsers: An unvisited link is underlined and blue A visited link is underlined and purple Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh HTML Links Possible values for href: An absolute URL (remote link) – link to other websites: <a href="http://yahoo.com">Yahoo</a> A relative URL (local link) - link to pages in your own site <a href="index.html">Home</a> An anchor URL - points to an anchor within a page (used a lot in back to top links) href="#top” (local link) Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh HTML Links If the target is not at the beginning of the document, the target spot must be marked - Target labels can be defined in many different tags with the id attribute, as in <h1 id = ”top”> This is the top of the Page </h1> - The link to an id must be preceded by a pound sign (#); If the id is in the same document, this target could be <a href = ”#top”>Back to top?</a> Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh HTML Links If the target is in a different document, the document reference must be included <a href = "myAd.html#baskets”> Baskets </a> If you would like the page to be loaded in a new Window use target <a href = Http://Ksu.edu.sa target="_blank"> KSU </a> * Find more info on attribute TARGET Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh HTML Links Email Hyperlink: Automatically launch the default mail program configured for the browser If no mail default is configured, a message is displayed <a href="mailto:me@ksu.edu.sa"> Email me</a> Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh Questions !!  Development of Internet Application 1501CT - Sara Almudauh