HTML (PDF)

HTML  Copyright Contributor(s): ▪ Alexandrino Gonçalves ▪ Marco Monteiro ▪ Norberto Henriques ▪ Carlos Urbano ▪ André Restivo ▪ Eugénia Moreira Bernardino Revised on: 19/09/2023 2 ...

HTML  Copyright Contributor(s): ▪ Alexandrino Gonçalves ▪ Marco Monteiro ▪ Norberto Henriques ▪ Carlos Urbano ▪ André Restivo ▪ Eugénia Moreira Bernardino Revised on: 19/09/2023 2  Internet Originally with 4 supercomputers, in 1969, scientists and researchers of the defence state department of the United States government remotely exchanged information. That 1st network was designated ARPANET. During the 1980s the military network was separated from the civil network. The Internet was born. Internet => Interconnected Network 3  Internet In fact, Internet is a number of services, where each one has it own protocol: – World Wide Web (WWW) – email – ftp – telnet –... 4  World Wide Web WWW was invented in 1989 by Tim Berners-Lee at CERN. Managed by the World Wide Web Consortium (W3C): – Founded in 1994; – Develops HTML, CSS, and most Web technologies; – Has almost 400 companies and organizations as members; – Headquarters at MIT (US), but with several offices around the world; – http://www.w3.org 5 Client/Server Architecture 6  Client/Server Architecture Client runs on the computer and makes requests to the services available on the server. Server is an application (software) that runs on a high capability computer that responds to the requests of the clients. A server can reply to several clients simultaneously. There are several types of servers: web, database, email,… 7  Web Architecture Clients are known as browsers: Firefox, Chrome, IE/Edge, Safari, Opera, … Source: http://www.w3counter.com/trends 8  Web Architecture Web servers are also known as HTTP servers, since this is the dominant protocol on the web. Example of web servers: – Apache – Microsoft Internet Information Services (IIS) – … The relationship between clients and servers are of N-to- N. The same client can perform requests to multiple servers; and the same server can reply to several clients. 9  Web Architecture The Web implements the concept of hypertext (text + links). A Uniform Resource Locator (URL) is a character string that constitutes a reference to an Internet resource. It always starts with the protocol followed by a colon and two slashes. 10  Web Architecture URL example: http://www.estg.ipleiria.pt/dei/file.html http: the protocol used by this client request; www.estg.ipleiria.pt: Domain Name System (DNS) of the server, that corresponds to the IP address of the server; dei: directory in the server where the resource is located; file.html: the name of the resource required by the client. 11  Web Architecture The HTTP (Hypertext Transfer Protocol) is the protocol used in the web. It is a Request/Reply protocol that operates between clients and web servers. When a client “ask for” a URL address, a HTTP request is sent to the server, which by its turn reply to the client, a HTML file for example. 12  Client Technologies The technologies must be known and interpreted by the client: – HTML – Cascading Style Sheets (CSS) – Javascript – Document Object Model (DOM) – Flash – Java – ActiveX –... 13  Server Technologies The technologies must be known and interpreted by the server: – PHP –.NET – Perl – Ruby on Rails –... 14  HTML HyperText Markup Language HTML is a markup language written in SGML (Standard Generalized Markup Language). SGML is a meta- language which is a system for organizing and tagging elements of a document. SGML was developed and standardized by the International Organization for Standards (ISO) in 1986. 15  HTML History 1992: HTML 1.0, Tim Berners-Lee original proposal 1993: HTML+, Dave Raggett's competing standard 1995: HTML 2.0, tables, file upload,... 1996: HTML 3.2, W3C standard, the Browsers war ends 1997: HTML 4.0, stylesheets are introduced 1999: HTML 4.01, the last HTML version 2000: XHTML 1.0, an XML version of HTML 4.01 2001: XHTML 1.1, modularization 2014: HTML 5, was published as a W3C recommendation 2017: HTML 5.2, latest HTML W3C recommendation 16  HTML 5 It is an improvement of HTML with, for example, support to multimedia, while keeping it easily readable and consistently understood by computers and devices. HTML 5 adds many new syntactical and semantic features. These include the new , and elements/ tags, as well as the integration of Scalable Vector Graphics (SVG) content. 17  HTML - Tags Syntax 1....(content)... This is some text in a paragraph. 2....(content)... This is a link 3. 4. 18  HTML Document html HTML 5 head body meta title Bem vindo às aulas de TI 19  HTML Document Defines the HTML version used in the document. This element is important to define the valid HTML syntax for the document validation. Indicates the beginning of the HTML document. The client (browser) consider the forward content as HTML codification. Defines the header of the HTML document, where meta-data should be located. For example, it can contain the link to the CSS of the document or the title of the page. This tag defines the title of the page. Usually this title appears on the upper left corner of the browser. Where the main content of the document must be placed. This is the HTML content that is displayed by the browser. 20  Quirks Mode When a HTML document misses the DOCTYPE directive, the client assumes the document don’t apply any norm. By this way it will interpret the document in a “quirks mode”. Quirks mode refers to a technique used to maintaining backward compatibility with web pages designed for older browsers and older HTML versions. Thereby each client makes its own interpretation of the code, making the sites mismatched. This can be avoided by strictly implement the syntax and define the proper DOCTYPE. 21  meta Tag Add metadata into the HTML document. Must be located inside. Documento de Exemplo 22  Character Set Define the character set used by the document. You have to make sure you are using the right encoding: – UTF-8: Character encoding for Unicode, up to 107000 characters (recommended); – ISO-8859-1: Character encoding for the Latin alphabet, up to 256 characters. 23  HTML Validator All HTML documents must be valid: – A HTML document is valid if it accomplish all the rules defined by the specification; – Albeit the browsers interpret invalid HTML documents, that should not occur; – Use http://validator.w3.org/ to check its validity. 24  Character Entities Some characters are special or might have some special meaning (, “ and &) and can be confused by the browser as markup. Character HTML Representation Alternative Ç &Ccedil; &#199; ç &ccedil; &#231; é &eacute; &#38; &nbsp; &#160; < &lt; &#60; > &gt; &#62; & &amp; &#38; “ &quot; &#34; ‘ &apos; &#39; In HTML to include three blank spaces, you have to use: &nbsp;&nbsp;&nbsp; 25  Block and Inline Tags There are two major types of HTML tags according to the way they display on the browser: – Inline tags occupy only the space they need and don't force line changes. Tag examples: a, span,... – Block tags, by default, use all the horizontal space they can get and force a line change before and after themselves. Tag examples: p, h1, div,... 26  HTML Syntax HTML is case-insensitive. You can use … – Although it is recommended to use only small caps, for coherency. Comments: 27  Headings & Paragraphs The to tags are used to define HTML headings: – defines the largest heading and defines the smallest heading: This is heading 1 … This is heading 6 The tag defines a paragraph This is some text in a paragraph. The tag defines a new line One line of text A different line. 28  Semantic Tags emphasized small strong subscripted superscripted inserted deleted highlighted 29  Ordered Lists An ordered list can be numerical or alphabetical. An item Another item And another one 30  Unordered Lists An item Another item And another one 31  Nested Lists Another list: Second list item Again First list item And another one 32  Description Lists WWW World Wide Web TI Tecnologias de Internet Engenharia Informática 33  Images The alt attribute is mandatory and provides alternative information for an image if the user for some reason cannot view it (a slow connection, an error in the src attribute or if the user uses a screen reader - Web Accessibility). The title attribute creates a tooltip for the image. 34  Images (HTML5) Testing figure and figcaption HTML5 tags. Fig.1 - The IPLeiria Logo. 35  Anchor/Links Absolute URL: IPL Relative URL: Press here An image can also be a link: 36  Anchor/Links Anchors are bookmarks in a HTML document. Define an anchor: Cap. 6 Link to an anchor – In the same document: text – In another document: text 37  Tables The tag is used to represent tabular data: – - starts the table definition – - defines a new row – - defines a new header column (cell) – - defines a new column (cell) Table with , and tags – is used to enclose a group of rows in a table as a header. – is used to enclose a group of rows in a table as a footer, such as last row for summary. – is for main body of the table. – Do not affect the layout of the table by default. CSS can be used to style these elements. 38  Tables My First Table Name Age Manel António 22 39  Tables – Cell Merging Cells can be merged horizontally or vertically. AB CDE F G 40  div & span Tags Used to define logical sections in the document: – They don’t have semantic output; – Normally, used to group other tags, in order to apply CSS; – Their only difference is that is a block element and is an inline element; 41  div & span Tags Example Testing div and span tags. This Computer Engineering class is cool. 42  id & class Attributtes The id and class attributes are used to easily identify a tag for manipulation (using javascript) or styling (using CSS). A HTML document cannot have two elements with the same id: text A HTML element can have more than one class (separated by whitespace): Question text 43  Sections in HTML5 HTML 5 introduces new section tags: Defines a section in the document Header of a document or section Footer of a document or section Defines an article Defines marginal content Group navigation links (e.g. menu) 44 Sections in HTML5 45 Sections in HTML5 46 Sections in HTML5 47  Forms form tag action: the web page that receives and processes the form. method: either get (values are sent in the URL – method by default) or post (values are sent inside the HTTP header). 48  Form Controls Three main types of form controls: – input: Several types of user editable fields; – textarea: A big editable text field; – select: A dropdown list. 49  Input An input field can vary in many ways, depending on the type attribute. 50  Text Inputs type: – text: text input with no constraints; – password: characters are not shown; – tel: input value is a telephone number; – search: input value is used to perform a search; – url: input value is an URL; – email: input value is used an e-mail; – button: A button, normally to be executed by javascript value: the value by default: 51  Input Common Attributes – type: the type of the input; – name: name of the field to be passed to the action; – autocomplete: value of the control can be automatically completed by the browser (on/off); – placeholder – suggestion to appear inside the field; – readonly: input value cannot be modified (boolean); – required: input must be filled out (boolean); – autofocus: set the focus to that controller; – disabled: input is disabled (boolean). 52  Pattern Attribute – pattern: The pattern attribute specifies a regular expression to match the desired input; Examples: Source: http://regexlib.com 53  Number Inputs type: – number: a precise control for setting a number; – range: imprecise control for setting a number; value: the initial value; min: the minimum value; max: the maximum value; step: limits the increments at which a value can be set. 54  Date/Time Inputs type: – date: control to select a date; – time: control to select a time of the day; – datetime: control to select a time in a certain day; – week: control to select a week; value: the initial value according to: RFC3339. 55  Color Input type: color: control to select a color; value: initial color in hexadecimal format. 56  Radio Buttons Male Female 57  Checkbox Internet Technologies Programming 2 English 58  File Upload Allows file uploading for storing or processing. To use file uploading in a form, method must be post and enctype must be multipart/form-data. 59  Select Dropdown boxes that allow users to select options from a list. value: The value sent to the server Computer Engineering Digital Games and Multimedia Information Science Technologies 60  Select - Option Groups Options in select controls can be grouped to make selecting them easier. Engenharia Informática Jogos Digitais e Multimédia Engenharia Informática - Computação Móvel Cibersegurança e Informática Forense Gestão de Sistemas de Informação Médica 61  Select Attributes name: name of the field to be passed to the action multiple: allow multiple selections (boolean) 62  Text Area A text input field for larger texts. This is an input field that allows the user to input several lines of text. This is the default value for that input. Be careful about extra white space. 63  Submit/Reset A button that allows the user to submit/send the form for processing (defined at the action attribute). The reset will put the controllers to their default value (e.g. empty, if not defined). The value contains the text to appear in the submit/reset button. 64  Label Allows the association between a label and its corresponding input. Clicking the label activates the input. Important for disabled people. Name: Name: 65  Field Set Allows grouping inputs in larger forms. Legend is the name of the group. Personal data: Name: Email: Date of birth: 66  Bibliography Syntax and specification: – http://www.w3.org/TR/html-markup/syntax.html – http://www.w3.org/TR/html5 HTML 5 – http://html5doctor.com – Luís Abreu, HTML5, FCA, 2015 Validation: – http://validator.w3.org/ 67