HTML JavaScript
HTML, CSS , Javascript
H. Sahibzada
(in)Visible [email protected]
Bauhaus University Weimar
25th April
H. Sahibzada Media Art & Design
HTML, CSS , Javascript
HTML JavaScript
Topics
1 HTML
2 JavaScript
H. Sahibzada Media Art & Design
HTML, CSS , Javascript
HTML JavaScript
HTMLHypertext Markup Language
HTML is a markup language for describing web documents (webpages).
HTML stands for Hyper Text Markup Language.
A markup language is a set of markup tags.
HTML documents are described by HTML tags.
Each HTML tag describes different document content.
H. Sahibzada Media Art & Design
HTML, CSS , Javascript
HTML JavaScript
HTML Tags
HTML tags are keywords (tag names) surrounded by anglebrackets ¡tagname¿content¡/tagname¿
HTML tags normally come in pairs like ¡p¿ and ¡/p¿The first tag in a pair is the start tag, the second tag is theend tagThe end tag is written like the start tag, but with a slashbefore the tag name
Figure: HTML markup tags.H. Sahibzada Media Art & Design
HTML, CSS , Javascript
HTML JavaScript
Page structureHTML page structure
Figure: HTML page structure
H. Sahibzada Media Art & Design
HTML, CSS , Javascript
HTML JavaScript
!DOCTYPE
The <!DOCTYPE>declaration helps the browser to display aweb page correctly.
There are different document types on the web.
To display a document correctly, the browser must know bothtype and version. The doctype declaration is not casesensitive. All cases are acceptable.
<!DOCTYPE html>
H. Sahibzada Media Art & Design
HTML, CSS , Javascript
HTML JavaScript
HTML Editors
HTML can be edited by using professional HTML editors like
Microsoft WebMatrix, Sublime Text, Notepad, Text edit, Anyeditor you know.
Online editors.
Open it, write basic HTML tags, save it as index.htmlextention.
H. Sahibzada Media Art & Design
HTML, CSS , Javascript
HTML JavaScript
HTML BasicsMost used tags
DOCTYPE <!DOCTYPE html>
html tag <html>.... </html>
Headings <h1>.... </h1>
Paragraphs <p>.... </p>
Links <a href=”http://www.w3schools.com”<This is alink</a<
Images <img src=”w3schools.jpg” alt=”W3Schools.com”width=”104” height=”142”<
H. Sahibzada Media Art & Design
HTML, CSS , Javascript
HTML JavaScript
HTML BasicsHTML elements
Open/Close elements: <tagname>content... </tagname>
Empty elements: <br />break line
Nested Elements: content between tags become other htmltags.
Do not forget the end tags (sometimes work (p))
H. Sahibzada Media Art & Design
HTML, CSS , Javascript
HTML JavaScript
HTML AttributesIntroduction
HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name=”value”
H. Sahibzada Media Art & Design
HTML, CSS , Javascript
HTML JavaScript
HTML AttributesAttribute examples
Title attribute: <p title=”About W3Schools”>
href attribute: <a href=”http://www.w3schools.com”<
Size attribute: <img src=”w3schools.jpg”alt=”W3Schools.com” width=”104” height=”142”<
alt attribute: <img src=”w3schools.jpg”alt=”W3Schools.com” width=”104” height=”142”<
Quotes: html5 does not require, you can use double or singlequotes.
H. Sahibzada Media Art & Design
HTML, CSS , Javascript
HTML JavaScript
HTML HeadingsHeadings
Figure: most important – least important
Used by search engines to index structure of your pages
H. Sahibzada Media Art & Design
HTML, CSS , Javascript
HTML JavaScript
HTML Headings<Head>element
This element contains meta data Meta data are notdisplayed.
It is placed between the <html>tag and the <body>tag:
meta tags: Does not change your page look, but provideadditional information about your page. but purely for searchengine’s use
<title>Effects the browser tab.<meta>It can be used to define the character set, and otherinformation about the HTML document.
<title>My First HTML</title>
<meta charset=”UTF-8”>
H. Sahibzada Media Art & Design
HTML, CSS , Javascript
HTML JavaScript
HTML stylesHTML displays
Screen size, resize window effects pages.
Browser removes extra spaces.
Any number of spaces, and any number of new lines, count asonly one space.
Poem problem. solved by <pre>
H. Sahibzada Media Art & Design
HTML, CSS , Javascript
HTML JavaScript
HTML stylesstyle attribute
Syntax: style=”property:value;” (CSS property and value)
Color: <h2 style=”color:red;”<I am red </h2>
background: <body style=”background-color:lightgrey;”>
Font: <h1 style=”font-family:verdana;”>This is aheading</h1>
Text size: <h1 style=”font-size:300%;”>This is aheading</h1>
Text Alignment: <h1 style=”text-align:center;”>CenteredHeading</h1>
H. Sahibzada Media Art & Design
HTML, CSS , Javascript
HTML JavaScript
CSSCascading Style Sheets
CSS is a stylesheet language that describes the presentation of anHTML (or XML) document. CSS describes how elements must berendered on screen, on paper, or in other media.
Inline - using a style attribute in HTML elements
Internal - using a ¡style¿ element in the HTML ¡head¿ section
External - using one or more external CSS files
H. Sahibzada Media Art & Design
HTML, CSS , Javascript
HTML JavaScript
CSSIntline Styling
Inline styling uses the style attribute.<h1 style=”font-family:verdana;”>This is a heading</h1>
H. Sahibzada Media Art & Design
HTML, CSS , Javascript
HTML JavaScript
CSSInternal Styling
Internal styling is used to define a style for one HTML page.
Figure: Internal styling example
H. Sahibzada Media Art & Design
HTML, CSS , Javascript
HTML JavaScript
CSSExternal Styling
An external style sheet is used to define the style for many pages.With an external style sheet, you can change the look of an entireweb site by changing one file! To use an external style sheet, add alink to it in the <head>section of the HTML page:
Figure: External styling exampleH. Sahibzada Media Art & Design
HTML, CSS , Javascript
HTML JavaScript
CSSexamples
General css style
specific css style: define id attribute for the html element <pid=”p01”>I am different</p>
In CSS side#p01 {color: blue;}
H. Sahibzada Media Art & Design
HTML, CSS , Javascript
HTML JavaScript
HTML remainings
Images
Tables
Lists
Blocks
Layouts
classes
iFrames
H. Sahibzada Media Art & Design
HTML, CSS , Javascript
HTML JavaScript
JavaScript
JavaScript is the programming language of HTML and theWeb.
HTML to define the content of web pages
CSS to specify the layout of web pages
JavaScript to program the behavior of web pages.
H. Sahibzada Media Art & Design
HTML, CSS , Javascript
HTML JavaScript
JavaScriptBasics
<script>tag is used to define a script (JavaScript).
<noscript >If browser does not support or disabled,
document.getElementById(”demo”).innerHTML = ”HelloJavaScript!”;
H. Sahibzada Media Art & Design
HTML, CSS , Javascript
HTML JavaScript
Thank You
H. Sahibzada Media Art & Design
HTML, CSS , Javascript
Appendix
Links
Relavent links I
HTML Tutorialhttp://www.w3schools.com/html/default.asp
CSS Tutorialhttp://www.w3schools.com/css/default.asp
Javascripthttp://www.w3schools.com/js/default.asp
H. Sahibzada Media Art & Design
HTML, CSS , Javascript