CS134 Web Design & Development Creating a Basic Web Page Mehmud Abliz.

Slides:



Advertisements
Similar presentations
Web Development & Design Foundations with XHTML
Advertisements

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.
ASHIMA KALRA.  WHAT IS HTML WHAT IS HTML  HTML TAGS HTML TAGS  FORMATTING TAGS FORMATTING TAGS.
INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.
1 eVenzia Technologies Learning HTML, XHTML & CSS Chapter 1.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 3: XHTML Coding © 2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page.
Site Development Foundations © 2004 ProsoftTraining All rights reserved.
XHTML 16-Apr-17.
XHTML1 Building Document Structure. XHTML2 Objectives In this chapter, you will: Learn how to create Extensible Hypertext Markup Language (XHTML) documents.
17-Jun-15 XHTML 2 What is XHTML? XHTML stands for Extensible Hypertext Markup Language XHTML is aimed to replace HTML.
Upgrading to XHTML DECO 3001 Tutorial 1 – Part 1 Presented by Ji Soo Yoon 19 February 2004 Slides adopted from
Developing a Basic Web Page with HTML
Introducing XHTML: Module B: HTML to XHTML. Goals Understand how XHTML evolved as a language for Web delivery Understand the importance of DTDs Understand.
Introducing HTML & XHTML:. Goals  Understand hyperlinking  Understand how tags are formed and used.  Understand HTML as a markup language  Understand.
Computer Sciences Department
Tutorial 1: Getting Started with HTML5
Basics of HTML Shashanka Rao. Learning Objectives 1. HTML Overview 2. Head, Body, Title and Meta Elements 3.Heading, Paragraph Elements and Special Characters.
Creating a Basic Web Page
Unit 1 – Developing a Web Page. Objectives:  Learn the history of the Web and HTML  Describe HTML standards and specifications  Understand HTML elements.
ULI101 – XHTML Basics (Part II) What is Markup Language? XHTML vs. HTML General XHTML Rules Block Level XHTML Tags XHTML Validation.
CS 299 – Web Programming and Design Introduction to HTML.
HTML Structure & syntax
Chapter 1 Understanding the Web Design Environment Principles of Web Design, 4 th Edition.
Week 1 Understanding the Web Design Environment. 1-2 HTML: Then and Now HTML is an application of the Standard Generalized Markup Language Intended to.
Essential Tags Web Design – Sec 3-3 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.
Tutorial 1 Developing a Basic Web Page. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives – Lesson 1 Introduction to the.
Chapter 1 XHTML: Part I The Web Warrior Guide to Web Design Technologies.
XHTML1 Building Document Structure Chapter 2. XHTML2 Objectives In this chapter, you will: Learn how to create Extensible Hypertext Markup Language (XHTML)
CS134 Web Design & Development Creating a Basic Web Page Exerted from Mehmud Abliz slides.
1 XHTML محمد احمدی نیا 2 Of 19 HTML vs XHTML  XHTML is a stricter and cleaner version of HTML.  by combining the strengths of HTML.
1 Web Developer Foundations: Using XHTML Chapter 2 Key Concepts.
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.
XHTML. Introduction to XHTML What Is XHTML? – XHTML stands for EXtensible HyperText Markup Language – XHTML is almost identical to HTML 4.01 – XHTML is.
Course Content - Chapter 2 Introduction to HTML Introduction to a Text Editor as a web authoring tool Instructional Activity: Creating a webpage using.
XP 1 HTML Committed to Shaping the Next Generation of IT Experts. 01: Introduction to HTML.
A Basic Web Page. Chapter 2 Objectives HTML tags and elements Create a simple Web Page XHTML Line breaks and Paragraph divisions Basic HTML elements.
Introduction to HTML. Slide 1 Hard-Coding What is hard-coding? –Creating the page in a text editor just using HTML A Web designer should know how to hard-
XP 2 HTML Tutorial 1: Developing a Basic Web Page.
Introduction to HTML Wah Yan College (Hong Kong) Mr. Li C.P.
HTML Structure & syntax. Introduction This presentation introduces the following: Doctype declaration HTML Tags, Elements and Attributes Sections of a.
HTML: Hyptertext Markup Language Doman’s Sections.
XHTML TAGS I Basic Tags. North Lake College 2 by Sean Griffin Sample XHTML Code.
Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Creating XHTML Documents Essentials for.
Web Development & Design Foundations with XHTML Chapter 2 HTML/XHTML Basics.
Lecture: Web Design Assis. Prof. Freshta Hanif Ehsan Faculty of Computer Science Kabul Polytechnic University Spring Semester
Introducing the World Wide Web Internet- a structure made up of millions of interconnected computers whose users communicate with each other and share.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.
HTML Basics Computers. What is an HTML file? *HTML is a format that tells a computer how to display a web page. The documents themselves are plain text.
HTML Introduction. Lecture 7 What we will cover…  Understanding the first html code…  Tags o two-sided tags o one-sided tags  Block level elements.
©SoftMoore ConsultingSlide 1 Introduction to HTML: Basic Document Structure.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
Unit 3 — Advanced Internet Technologies Lesson 10 — Introduction to XHTML.
XP 2 HTML Tutorial 1: Developing a Basic Web Page.
HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page.
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.
NOTEPAD++ Lab 1 1 Riham ALSmari. Why Notepad++ ?  Syntax highlighting  Tabbed document interface  Zooming  Indentation code  Find and replace over.
Glencoe Introduction to Web Design Chapter 4 XHTML Basics 1 Review Do you remember the vocabulary terms from this chapter? Use the following slides to.
HTML Introduction. Lecture 7 What we will cover…  Understanding the first html code…  Tags o two-sided tags o one-sided tags  Block level elements.
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 1 Using HTML to Create Web Pages.
HTML Basics.
XHTML/CSS Week 1.
Internet Technology and Website Design
Chapter 1: Introduction to XHTML (part 1)
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
Creating a Basic Web Page
محمد احمدی نیا XHTML محمد احمدی نیا
Web Design & Development
Presentation transcript:

CS134 Web Design & Development Creating a Basic Web Page Mehmud Abliz

HTML Source Document When you connect to a web page by entering its URL into the browser –Browser instructs your computer to send a message out over the Internet to the computer specified by that URL requests that it sends back a certain document (HTML source doc) –HTML source doc describes the content and layout of the web page –After your computer receives the html, your browser interprets the html and displays the resulting web page (text/graphics/links etc)

HTML Source Document HTML source document –A text-only document –Consists of (1) actual text, and (2) tags A tag is an html code that is enclosed in angel brackets <>; used to lay out the web page. XHTML is a simple, more standardized version of HTML XHTML/HTML can be created using a simple text editor like notepad File extension must be.html or.htm

Sample HTML HTML SourceFirefox display of the html source

HTML, XML, XHTML XML (eXtensible Markup Language): –is a set of rules that lets web designers classify their data in a way customized to their needs. –Extendable by creating new types of tags. XHTML (eXtensible HyperText Markup Language): –A new version of HTML based on XML –Inherits strict syntax rules of XML

HTML vs. XHTML Some comparisons of HTML vs. XHTML HTMLXHTML Tags aren’t extensibleTags are extensible Tags are not case- sensitive Only lowercase tags are allowed Possible to leave off and ending tag like Tags should appear in pairs Overlapping tagsNo overlapping tags For this course, we use XHTML

Composition of a XHTML Document An XHTML document consists of three main parts: –the DOCTYPE –the Head –the Body

Composition of a XHTML Document... … …

Creating XHTML The 1st line is an XML declaration that indicates to the browser the version of XML used in this doc. The 2nd line ( ) is a Document Type Definition (DTD), it specifies what type of document this is – in this case an XHTML document. The 3rd line, xmlns specifies the namespace, it tells the browser that all tags contained within the tag belong to the XHTML namespace as defined by the W3C and located at the given URL.

XHTML Tags/Elements Tags are also called elements An attribute is a special code that can enhance or modify a tag. They are generally located in the starting tag after the tag name. Basic syntax for xhtml tags and attributes – –All tags must be lower case –all values of attributes need to surrounded by quotes

XHTML Tags/Elements Example – This is bold text… – This text will appear aligned to the center…

tag –is used to specify Keywords that describe a document’s contents as well as a short description. Two necessary attributes – "name" & "content"

paragraph tag tag –The paragraph tag. Used so separate text within a web page. –Container type –Will provide line breaks Optional attribute : align

tag –Is used for line break Example Contact 6150 Sennott Square University of Pittsburgh Pittsburgh, PA 15260

Headings to –Define headers. defines the largest header. defines the smallest header. Example This is header 1 This is header 2 This is header 3 This is header 4 This is header 5 This is header 6

& tags tag –Renders text as emphasized text tag –Renders text as strong emphasized text Example Emphasized text Strong text

Commenting Source Code Comments are inclosed in Example This is a regular paragraph

tag –tag defines the start of a long quotation. To validate the page as strict XHTML, you must add a block-level element around the text within the tag, like this: here is a long quotation here is a long quotation