html - linkedin

25
<HTML> By: Gino Louie Peña

Upload: gino-louie-pena

Post on 18-Feb-2017

216 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: HTML - LinkedIn

<HTML>By: Gino Louie Peña

Page 2: HTML - LinkedIn

What is HTML?

HTML stands for Hyper Text Markup Language. It is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet or in any browser.

Page 3: HTML - LinkedIn

Brief History of HTMLBefore we enjoy the beauty and comfort of surfing the internet let us have a quick overview of the language that allows us to scan our FB feeds, post or tweets and upload images of our food and whereabouts.

• Tim Berners-Lee invents the Web with HTML as its publishing language in 1989

• In 1991 an Open discussion about HTML across the Internet begins.• 1994 - HTML specification for HTML 2 is released as well as the

formation of World Wide Web Consortium to fulfill the potential of the Web through the development of open standards.

• August of 1995, Microsoft's Internet Explorer browser comes out and in the same year of November Style sheets for HTML begin to take shape.

• HTML 3.2 was ready last January 1997 and W3 Consortium formally endorsed HTML 3.2 as an HTML cross-industry specification. One might well ask why HTML 3.2 was called HTML 3.2 and not, let's say, HTML 3.1 or HTML 3.5. The version number is open to discussion just as much as is any other aspect of HTML. The version number is often one of the last details to be decided.

• Spring of 1998 HTML4 is fully materialized.• HTML 5 started to sprung in 2009

Page 4: HTML - LinkedIn

How does HTML work?

HTML consists of a series of short codes typed into a text-file by the site author — these are the tags. The text is then saved as a html file, and viewed through a browser, like Internet Explorer or Netscape Navigator. This browser reads the file and translates the text into a visible form, hopefully rendering the page as the author had intended.

Page 5: HTML - LinkedIn

Trivia

You can write your own HTML document (webpage) using notepad.

Simply save the document with “.html” or “.htm” extension.

Page 6: HTML - LinkedIn

Composition of HTML

• Tags • Elements• Attributes• Forms • Events• Methods• Doctypes• Entities

Page 7: HTML - LinkedIn

Basic structure of HTMLDoctype

HTML

Head

Body

Page 8: HTML - LinkedIn

Basic HTML structure in code

All HTML documents must start with a type declaration: <!DOCTYPE html>.The HTML document itself begins with <html> and ends with </html>.The HTML document itself has a header <head> which with end code of </head>, usually the title And some scripts are located here.The visible part of the HTML document is between <body> and </body>.

Page 9: HTML - LinkedIn

HTML ElementsThe <html> element defines the whole document.

It has a start tag and an end tag .

The element content is another HTML elementHTML elements are written with a start tag, with an end tag, with the content in between:

<tagname>content</tagname>Example:

<p>My first HTML paragraph.</p>

HTML elements can be nested (elements can contain elements).The HTML5 standard does not require lowercase tags, but it is recommended to use lowercase in HTML4, and demands lowercase for stricter document types like XHTML.

<html> </html>

Page 10: HTML - LinkedIn

HTML tagsTag Description

<!DOCTYPE> Defines the document type

<html> Defines an HTML document

<title> Defines a title for the document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings

<p> Defines a paragraph

<br> Inserts a single line break

<hr> Defines a thematic change in the content

<!--...--> Defines a comment

Basic HTML FormattingTag Description

<b> Defines bold text

<blockquote> Defines a section that is quoted from another source

<cite> Defines the title of a work

<del> Defines text that has been deleted from a document

<font> Not supported in HTML5. Use CSS instead.Defines font, color, and size for text

<i> Defines a part of text in an alternate voice or mood

<pre> Defines preformatted text

<q> Defines a short quotation

<rt> Defines an explanation/pronunciation of characters (for East Asian typography)

<s> Defines text that is no longer correct

<strike> Not supported in HTML5. Use <del> or <s> instead.Defines strikethrough text

<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

<time> Defines a date/time

<u> Defines text that should be stylistically different from normal text

Page 11: HTML - LinkedIn

Tag Description

<form> Defines an HTML form for user input

<input> Defines an input control

<textarea> Defines a multiline input control (text area)

<button> Defines a clickable button

<select> Defines a drop-down list

<optgroup> Defines a group of related options in a drop-down list

<option> Defines an option in a drop-down list

<label> Defines a label for an <input> element

<fieldset> Groups related elements in a form

<legend> Defines a caption for a <fieldset> element

<datalist> Specifies a list of pre-defined options for input controls

<keygen> Defines a key-pair generator field (for forms)

<output> Defines the result of a calculation

Forms and Input

Tag Description

<img> Defines an image

<map> Defines a client-side image-map

<area> Defines an area inside an image-map

<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)

<figcaption> Defines a caption for a <figure> element

<figure> Specifies self-contained content

Images

Tag Description

<a> Defines a hyperlink

<link> Defines the relationship between a document and an external resource (most used to link to style sheets)

<nav> Defines navigation links

Links

Page 12: HTML - LinkedIn

Tag Description

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dir> Not supported in HTML5. Use <ul> instead.Defines a directory list

<dl> Defines a description list

<dt> Defines a term/name in a description list

<dd> Defines a description of a term/name in a description list

<menu> Defines a list/menu of commands

<menuitem> Defines a command/menu item that the user can invoke from a popup menu

Lists

Tag Description

<table> Defines a table

<caption> Defines a table caption

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

<col> Specifies column properties for each column within a <colgroup> element

<colgroup> Specifies a group of one or more columns in a table for formatting

Tables

Page 13: HTML - LinkedIn

Tag Description

<script> Defines a client-side script

<noscript> Defines an alternate content for users that do not support client-side scripts

<applet> Not supported in HTML5. Use <embed> or <object> instead.Defines an embedded applet

<embed> Defines a container for an external (non-HTML) application

<object> Defines an embedded object

<param> Defines a parameter for an object

ProgrammingTag Description

<style> Defines style information for a document

<div> Defines a section in a document

<span> Defines a section in a document

Styles and Semantics

Tag Description

<head> Defines information about the document

<meta> Defines metadata about an HTML document

<base> Specifies the base URL/target for all relative URLs in a document

<basefont> Not supported in HTML5. Use CSS instead.Specifies a default color, size, and font for all text in a document

Meta Info

Page 14: HTML - LinkedIn

HTML AttributesAttributes provide additional information about HTML elements.

– 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"

Attribute Description

accesskey Specifies a shortcut key to activate/focus an element

class Specifies one or more classnames for an element (refers to a class in a style sheet)

contenteditable Specifies whether the content of an element is editable or not

contextmenu Specifies a context menu for an element. The context menu appears when a user right-clicks on the element

data-* Used to store custom data private to the page or application

dir Specifies the text direction for the content in an element

draggable Specifies whether an element is draggable or not

dropzone Specifies whether the dragged data is copied, moved, or linked, when dropped

hidden Specifies that an element is not yet, or is no longer, relevant

id Specifies a unique id for an element

lang Specifies the language of the element's content

spellcheck Specifies whether the element is to have its spelling and grammar checked or not

style Specifies an inline CSS style for an element

tabindex Specifies the tabbing order of an element

title Specifies extra information about an element

translate Specifies whether the content of an element should be translated or not

Page 15: HTML - LinkedIn

Creating table in the HTML documentTables are defined with the <table> tag.Tables are divided into table rows with the <tr> tag.Table rows are divided into table data with the <td> tag.A table row can also be divided into table headings with the <th> tag.

Table data <td> are the data containers of the table.They can contain all sorts of HTML elements like text, images, lists, other tables, etc.

<!DOCTYPE html><html><body>

<table style="width:100%"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr></table>

</body></html>

Result

Page 16: HTML - LinkedIn

<!DOCTYPE html><html><body>

<h2>Ordered List with Numbers</h2>

<ol type="1"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>

</body></html>

Type Description

type="1" The list items will be numbered with numbers (default)

type="A" The list items will be numbered with uppercase letters

type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman numbers

type="i" The list items will be numbered with lowercase roman numbers

Creating a list in HTMLThere are 2 types of list that we can do in HTML namely the ordered list and unordered list.An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.The list items will be marked with numbers.A type attribute can be added to an ordered list, to define the type of the marker:

Result

Page 17: HTML - LinkedIn

Style Description

list-style-type:disc The list items will be marked with bullets (default)

list-style-type:circle The list items will be marked with circles

list-style-type:square The list items will be marked with squares

list-style-type:none The list items will not be marked

<!DOCTYPE html><html><body>

<h2>Unordered List with Disc Bullets</h2>

<ul style="list-style-type:disc"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul>

</body></html>

Creating a list in HTMLAn unordered list starts with the <ul> tag. Each list item starts with the <li> tag.The list items will be marked with bullets (small black circles).A style attribute can be added to an unordered list, to define the style of the marker:

Result

Page 18: HTML - LinkedIn

Both the width, the height, and the style attributes, are valid in the latest HTML5 standard.We suggest you use the style attribute. It prevents styles sheets from changing the default size of images:

Inserting pictures in HTML documentIn HTML, images are defined with the <img> tag.The <img> tag is empty, it contains attributes only, and does not have a closing tag.The src attribute defines the url (web address) of the image:

<img src="url" alt="some_text">

<!DOCTYPE html><html><head><style>img { width:100%;}</style></head>

<body>

<p>It is better to use the style attribute (instead of the width and height attributes), because it prevents internal or external styles sheets to change the default size of an image:</p>

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px"><img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

</body></html>

Page 19: HTML - LinkedIn

Inserting pictures in HTML document (continuation)

Result

Page 20: HTML - LinkedIn

Blocks & Spans in HTMLThe HTML <div> element is a block level element that can be used as a container for other HTML elements.The <div> element has no special meaning. It has no required attributes, but style and class are common.Because it is a block level element, the browser will display line breaks before and after it.When used together with CSS, the <div> element can be used to style blocks of content.

The HTML <span> element is an inline element that can be used as a container for text.The <span> element has no special meaning. It has no required attributes, but style and class are common.Unlike <div>, which is formatted with line breaks, the <span> element does not have any automatic formatting.When used together with CSS, the <span> element can be used to style parts of the text:

<h1>My <span style="color:red">Important</span> Heading</h1>

Page 21: HTML - LinkedIn

Creating linksHTML links are hyperlinks.A hyperlink is a text or an image you can click on, and jump to another document. In HTML, links are defined with the <a> tag:<a href="url">link text</a>Example:

The href attribute specifies the destination address (http://www.google.com/)The link text is the visible part (Visit our HTML tutorial).Clicking on the link text, will send you to the specified address.

<a href="http://www.google.com/">Visit Google</a>

Page 22: HTML - LinkedIn

HTML is boringI know HTML is boring because it is the frame or the skeleton of your webpage. CSS will beautify your webpage and make it pleasing and attractive, but what is CSS?

VS

Page 23: HTML - LinkedIn

CSS

CSS stands for Cascading Style Sheets

Styling can be added to HTML elements in 3 ways:

• 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 filesThe most common way to add styling, is to keep the styles in separate CSS files.

Page 24: HTML - LinkedIn

<!– Questions? -->

Page 25: HTML - LinkedIn

Reference

• http://www.yourhtmlsource.com/starthere/whatishtml.html

• http://www.w3schools.com/html