Download HTML and XML Basics - csns - California State University, Los

yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project

Document related concepts

URL shortening wikipedia , lookup

Cascading Style Sheets wikipedia , lookup

URL redirection wikipedia , lookup

CS3220 Web and Internet Programming
HTML and XML Basics
Chengyu Sun
California State University, Los Angeles
HyperText Markup Language, the
language for creating web pages
<h2>Welcome to CS3220!</h2>
Extensible Markup Language, the
general-purposed language to describe
structured data
<name>Chengyu Sun</name>
<office>ET A317</office>
<phone>(323) 343-6697</phone>
A Brief History of HTML and
Early markup languages (1960s to 1980s)
TeX/LaTex (1978)
SGML (early 1980s)
HTML (1991)
HTML 4.01 (1999)
XHTML 1.0 (2000)
HTML 5 (2014)
XML (1998)
A LaTex Example
An XML Example
<?xml version="1.0" encoding="UTF-8"?>
<user type=“faculty”>
<name>Chengyu Sun</name>
<office>ET A317</office>
<phone ext=“6697” />
Tag and attribute
Element and content
Opening (start) tag and closing (end) tag
Empty element
NOT Well-Formed XML
<?xml version="1.0" encoding="UTF-8"?>
<user type=“faculty”>
<name>Chengyu Sun</Name>
<office>ET A317</office>
<phone ext=“6697”>
<user type=“faculty”>
<name>Raj Pamula</name>
<office>E&T A324</office>
How About Well-formedness
of HTML?
HTML (not XHTML) is more forgiving
Tag and attribute names are caseinsensitive
Some tags are self closing, e.g. <meta>
and <br>
Some closing tags are optional, e.g. <p>,
and even <html>, <head>, <body>
Validity and Namespace of
Issues of being a general-purposed
markup language
How can we decide a particular
tag/attribute is valid?
How can we avoid name conflicts, i.e.
different people/applications/specification
using the same tag name for different
Specify XML Grammar – DTD
Document Type Definition
DTD Example
Reference DTD in XML …
Reference a “private” DTD (DTD intended for
use by a single author or a group of authors)
<!DOCTYPE root_element SYSTEM "DTD_location">
Reference a “public” DTD
<!DOCTYPE root_element PUBLIC
"DTD_name" "DTD_location">
… Reference DTD in XML
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE user SYSTEM “mydtd.dtd”>
<user type=“faculty”>
<name>Chengyu Sun</name>
<office>ET A317</office>
<phone ext=“6697” />
More at
Specify XML Grammar – XML
XML Schema Definition (XSD)
Support data types
Allow more detailed constraints
Use XML syntax
XSD Example
XML Schema Example:
<?xml version="1.0" encoding="UTF-8"?>
id="WebApp_ID" version="3.0">
XML Namespace
Each XML namespace is identified by a URI
(Uniform Resource Identifier)
Difference between URI and URL??
A namespace can be referenced as
xmlns:prefix="URI”, and the
elements/attributes defined in the namespace
can then be used as prefix:element or
xmlns=“URI” defines a default namespace
for which the prefix can be omitted
Developing Web Pages
Create HTML pages
Validate HTML pages
Upload HTML pages to a server
HTML Editors
Text editors, e.g. Notepad
WYSIWYG editors, e.g. CKEditor in
Text editors for developers, e.g.
Notepad++ and Atom; IDEs like Eclipse
and Visual Studio
Professional tools for web designers like
Adobe Dreamweaver
Use Eclipse to Create HTML
Create a Static Web Project
Create HTML files in the WebContent
Locate the HTML files on disk
View the HTML files in a browser
Structure of an HTML Page
<!DOCTYPE html>
<meta charset="UTF-8">
DOCTYPE Declaration
Indicates which version of
HTML/XHTML the document uses
Common DOCTYPE declarations
HTML 4.01 Strict
HTML 4.01 Transitional
XHTML 1.0 Strict
XHTML 1.0 Transitional
<head> Section
Contain elements that provide
information about the web page rather
than the content of the page
<title> - title for the browser tab
<meta> - metadata about the page
<link> - mostly used for style sheets
<script> - for JavaScript
Character Set and Encoding
Character set is, well, a set of
characters, e.g. Unicode
Encoding is the way how characters are
represented in a computer as a
sequence of 0’s and 1’s, e.g. UTF-8
Change default HTML encoding in Eclipse
<body> Section
Contain elements that will be displayed
in the browser window
Headings and Paragraphs
<h1>, <h2>, …, <h6>
A block element always starts on a new
line and can contain other elements
Other Commonly Used Block
Elements …
<pre> - preformatted text, i.e.
whitespaces and line breaks are
<div> - a general-purposed block
element used to structure a page into
logical divisions that can be formatted,
positioned, and/or processed.
… Other Commonly Used
Block Elements
<ul> - unordered list
<ol> - ordered list
<li> - list item
Common Inline Elements
<i> - italic, <b> - bold, <u> - underlined
<em> - emphasized
<strong> - strongly emphasized
<code> - for computer code
<span> - a general-purposed inline
element (like an inline version of <div>)
<br> - line break
Anchor <a>
Creates a hyperlink to other web pages,
files, locations within the same page,
email addresses, or any other URL.
<a href=“”>CSULA</a>
Absolute and Relative URLs
Absolute URL
Relative URL
Link to Locations within a
<a href=“#section1”>Introduction</a>
<a href=“#section2”>HTML Basics</a>
<h2 id=“section1”>Introduction</h2>
<h2 id=“section2”>HTML Basics</h2>
Some Core Attributes
Attributes that are common to all HTML
id: a unique identifier for the element
title: additional information about the
class: CSS class
style: inline CSS style
More at
Other Uses of <a>
Email link
<a href="mailto:[email protected]">Email Me</a>
Phone link
<a href=“tel:+1-323-343-6697">Call me</a>
Image <img>
src: URL to the image
alt: alternate text if the image cannot be
height and width in pixels
JPEG, GIF, and PNG images are
supported by most browsers
Clickable image??
HTML Special Characters
(HTML Entities)
White space: &nbsp;
<: &lt;
>: &gt;
&: &amp;
More at
XML/HTML Comments
<!-- This is a single-line comment. -->
<!-- This is a
comment. -->
The syntax for comments is the same
for both XML and HTML
HTML Validators
Automatic validation in HTML editor,
e.g. Eclipse
Customize the Problems view in Eclipse
Browser plugins like HTML Validator and
Usually do not validate local files
Online validator
File Transfer Tools
Usually need to support SFTP (Secure
File Transfer Protocol) and/or SCP
(Secure Copy)
FileZilla Client -
Use of CS3 Server
CS3 Server Information
See the [Apache/PHP] section