Create website Notes

Markup Language - Include directives with content Directives can dictate presentation or describe content Idea from the 1960s: RUNOFF

Examples: <i>italics word</i>, <b>bold word</b><title>Title words</title> Example of a declarative language

Approach

1. Start with content to be displayed

2. Annotate it with tags

HTML uses < > to denote tags

HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web Pages.

· Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus, the link available on a webpage is called Hypertext.

· As its name suggests, HTML is a Markup Language which means you use HTML to simply "mark-up" a text document with tags that tell a Web browser how to structure it to display.

Originally, HTML was developed with the intent of defining the structure of documents like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers.

Now, HTML is being widely used to format web pages with the help of different tags available in HTML language.

its simplest form, following is an example of an HTML document:

<!DOCTYPE html>

<html>

<head>

<title>This is document title</title>

</head>

<body>

<h1>This is a heading</h1>

<p>Document content goes here.... </p>

</body>

</html>

Either you can use Try it option available at the top right corner of the code box to check the result of this HTML code, or let's save it in an HTML file test.htm using your favorite text editor. Finally open it using a web browser like Internet Explorer or Google Chrome, or Firefox etc. It must show the following output:

● <h1> means top-level heading

● <p> means paragraph

● <ul><li> for unordered (bulleted) list Formatting information (<i> for italic) Additional information to display (e.g., <img>)

Tags can have tags inside (nesting supported) - Document forms a tree

Introduction

There are several good reasons for taking CS142: Web Applications:

You will learn a variety of interesting concepts.

It may inspire you to change the way software is developed. It will give you the tools to become fabulously wealthy.

<h2>Introduction</h2>

<p>

There are several good reasons for taking

<i>CS142: Web Applications</i>:

</p>

<ul>

<li>

You will learn a variety of interesting concepts.

</li>

<li>

It may inspire you to change the way software is developed.

</li>

<li>

It will give you the tools to become fabulously wealthy.

<h2>Introduction</h2>

<p>

There are several good reasons for taking

<i>CS142: Web Applications</i>:

</p>

<ul>

<li>

You will learn a variety of interesting concepts.

</li>

<li>

It may inspire you to change the way software is developed.

</li>

<li>

It will give you the tools to become fabulously wealthy.

Introduction

There are several good reasons for taking CS142: Web Applications:

● You will learn a variety of interesting concepts.

● It may inspire you to change the way software is developed.

● It will give you the tools to become fabulously wealthy.

Influenced by browser implementation quirks

What to do if you see “<p>Some text” (missing closing </p>)?

1. Complain bitterly about malformed HTML.

2. Figure out there was a missing </p>, add it, and continue processing. Forked into HTML and XHTML (XML-based HTML)

XHTML is more strict about adhering to proper syntax For the HTML class projects (1, 2, and 3) we will use XHTML

Users came to depend on browser quirks, so browsers couldn't change

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Hello World</title>

</head>

<body>

<p>Hello world!</p>

</body>

</html>

Document: hierarchical collection of elements, starting with <html>

Element: start tag, contents, end tag Elements may be nested

Every element must have an explicit start and end Can use <foo /> as shorthand for <foo></foo>

Start tags can contain attributes:

To display a literal < or > in a document, use entities:

< Displays <

> Displays >

& Displays & " Displays "

  Nonbreaking space (won’t insert a line break at this space) Many other entities are defined for special characters.

Whitespace is not significant except in a few cases (e.g. textarea, pre tags)

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Hello World</title>

</head>

<body>

<p>Hello world!</p>

</body>

</html>

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" https://sites.google.com/view/informatics-assistant/>

Indicate that this is an XHTML document, conforming to version 1.0 of the standard; use these lines verbatim in all the web pages you create for this class.

Outermost element containing the document

<head>: Contains miscellaneous things such as page title, CSS stylesheets, etc.

<body>: the main body of the document

<p> New paragraph

<br> Force a line break within the same paragraph

<h1>, <h2>, ... Headings

<b>, <i> Boldface and italic

<pre> Typically used for code: indented with a fixed-width font, spaces are significant (e.g., newlines are preserved)

<img> Images

<a href="..."> Hyperlink to another Web page

Comment tags

<table>, <tr>, <td> Tables

<ul>, <li> Unordered list (with bullets)

<ol>, <li> Ordered list (numbered)

<div> Used for grouping related elements, where the group occupies entire lines (forces a line break before and after)

<span> Used for grouping related elements, where the group is within a single line (no forced line breaks)

<form>, <input>, <textarea>, <select>, ... Used to create forms where

users can input data

<title> Specify a title for the page, which will appear in the title bar for the browser window.

HTML supports the same tags, same features, but allows quirkier syntax: Can skip some end tags, such as </br>, </p>

Not all attributes have to have values: <select multiple>

Elements can overlap: <p><b>first</p><p>second</b> third</p>

Early browsers tried to "do the right thing" even in the face of incorrect HTML: Ignore unknown tags

Carry on even with obvious syntax errors such as missing <body> or </html>

Infer the position of missing close tags

Guess that some < characters are literal, as in "What if x < 0?"

Not obvious how to interpret some documents (and browsers differed)

● Additions tags to allow content definition

○ <article>, <section>, <header>, <footer>, <summary>, <aside>, <details>

○ <mark>, <figcaption>, <figure>

○ <nav>, <menuitem>

● Drawing

○ <svg> - Scalable Vector Graphics - Draw shapes

○ <canvas> - Draw from JavaScript - 3D with WebGL

● Timed media playback: <video> and <audio>

Page updated

Google Sites

Report abuse