Web technologies Tehnologii web COURSE 02 HTML lect

Web technologies Tehnologii web

COURSE 02 HTML lect. eng. Rajmond JÁNÓ, Ph. D rajmond. jano@ael. utcluj. ro fb. com/janorajmond

C 02 – HTML • Static vs. dynamic pages • Front-end vs. back-end • HTML • General site layout • Common tags and attributes • Choosing an editor

STATIC PAGES VS. DYNAMIC PAGES • A static website is a group of self-contained, individual pages (or a single page), sent to the browser from a server, one page at a time page 1. html User page 2. html Server

STATIC PAGES VS. DYNAMIC PAGES • Example of a static website

STATIC PAGES VS. DYNAMIC PAGES • Dynamic web content is built when it is requested, by the user directly, or programmatically while the user is on the page 1. html User Server

STATIC PAGES VS. DYNAMIC PAGES • Example of a dynamic web page

STATIC PAGES VS. DYNAMIC PAGES • Most websites are a mix of both static and dynamic elements

FRONT-END VS BACK-END • Front-end: how the page is presented, what the user sees • Back-end: how data is processed and responds to the user requests (code behind the website) page 1. html User Server

CLIENT-SIDE VS. SERVER-SIDE • Client-side (front-end) coding includes HTML, CSS and Java. Script • In this scenario, the code will be downloaded from the server to the client machine and then compiled/parsed entirely by the browser

CLIENT-SIDE VS. SERVER-SIDE • Server-side (back-end) coding can be done in almost any language (C#, Java, Ruby, etc. ) and also includes database operations • Server-side (back-end) code is executed on the server machine and only the results are sent to the client

WEBSITE DESIGN • Structure • • HTML markup Site plan • Style • • CSS Imagery • Behavior • • Java. Script Other code behind

WEBSITE DESIGN

HTML • Hypertext Markup Language • Hypertext • A software system allowing extensive cross-referencing between related sections of text and associated graphic material • Markup Language • A computer language that uses tags to define elements within a document

HTML • HTML documents are “plain text” documents, which the browser renders in accordance with the contained “instructions” (tags) • A plain text document (without any markup) can also be rendered, however this will be unformatted and unstyled

HTML Source HTML document Rendered in Firefox

HTML • HTML tags give structure and meaning to your content • “Semantic markup” refers to the use of meaningful tags to describe content (e. g. using header tags for header content) • When the content is marked up, the browser will apply built-in default styles to the tags • These styles can be overwritten either in HTML or in CSS

HTML Better than before, but still Source HTML document Rendered in Firefox

HTML ELEMENTS • An HTML element includes both the HTML tag and everything between the tag (the content) <tag>content</tag>

HTML ELEMENTS • Tags normally come in pairs: the first tag is the start tag and the second one is the end (closing) tag <tag>content</tag> • HTML has a defined set of tag names (keywords) that browsers will understand

HTML ELEMENTS • Most elements can have attributes, which provide additional information about the elements <tag attribute=“value”>content</tag> • Attributes always follow the same format: • • name=“value” ‘Single’ or “double” quotes can be used to specify values

NESTING • HTML tags can be nested: tags wrap other tags • Nesting should be indicated by proper indentation <tag> <nested_tag> <other_tag>content</other_tag> </nested_tag> </tag>

DOCUMENT HIERARCHY • By nesting tags, a hierarchy is created in the document • This hierarchy is described in terms of a relationship: grandparents, children and <grandparent> siblings <parent> <child_sibling_a>content a</child_sibling_a> <child_sibling_b>content b</child_sibling_b> </parent> </grandparent>

CREATING AN HTML FILE • Create a text file with any plain text editor • Extension “. htm” or “. html” • index. html • When an HTTP client (generally a web browser) requests a URL that points to a directory structure instead of an actual web page within the directory, the web server will generally serve a default page, which is often referred to as a main or "index" page

HTML TAGS • The <!DOCTYPE> is not actually a tag, but a declaration, telling the browser what kind of html you are using • The doctype below declares HTML 5

HTML TAGS • The <html> element defines the whole HTML document • Common attributes • • lang – web page language (e. g. lang=“en”) xmlns – XML Name. Space

HTML TAGS • The <head> element contains special elements that instruct the browser where to find stylesheets, provide meta info, and more

HTML TAGS • The <body> element contains the document content (what is shown inside the browser window)

OUR HTML DOCUMENT SO FAR You may skip indenting by exception for <html>, <head> and <body> tags

HTML TAGS - <HEAD> SECTION • The <title> tag defines the title our web page will have (displayed in the Title Bar or Tab Name of the browser, in the Windows Taskbar, etc. ) No title tag

HTML TAGS - <HEAD> SECTION • The <title> tag defines the title our web page will have (displayed in the Title Bar or Tab Name of the browser, in the Windows Taskbar, etc. ) With title tag

HTML TAGS - <HEAD> SECTION • The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. • Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. • The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

HTML TAGS - <HEAD> SECTION • Common attributes of the <meta> tag: • • charset – the character set used by the web page description – the description of the web page, often used by search engines when showing the web page in search results • keywords – often used by search engines when indexing the web page • author – name of the author of the web page

HTML TAGS - <HEAD> SECTION

HTML TAGS - <HEAD> SECTION • Setting the Viewport • HTML 5 introduced a method to let web designers take control over the viewport, through the <meta> tag. • The viewport is the user's visible area of a web page. It varies with the device and will be smaller on a mobile phone than on a computer screen. • A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling.

HTML TAGS - <HEAD> SECTION • Setting the Viewport • You should include the following <meta> viewport element in all your web pages • The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device) • The initial-scale=1. 0 part sets the initial zoom level when the page is first loaded by the browser

HTML TAGS - <HEAD> SECTION • Setting the Viewport Without viewport meta tag With viewport meta tag

HTML TAGS - <BODY> SECTION • Heading tags – used for titles, sections, etc. • From <h 1></h 1> down to <h 6></h 6>

HTML TAGS - <BODY> SECTION • A paragraph tag <p></p> is used to define a paragraph of text (which can include also other visual elements)

HTML TAGS - <BODY> SECTION • Text formatting tags HTML 5 Replaces Description <em></em> <i></i> Emphasis (italics) <strong></strong > <b></b> Strong (bold) <mark></mark> Highlights <code></code> Computer code <q></q> Quotation <del></del> <s></s> <strike></strike> Strike through (deleted) <u></u> Underline <pre></pre> Preformatted text

HTML TAGS - <BODY> SECTION • Text formatting tags

HTML TAGS - <BODY> SECTION • Changing text scripting HTML 5 Description  Subscript  Superscript

HTML TAGS - <BODY> SECTION • The <font></font> tag can be used to set different formatting options for a given text, with the following attributes • • • color – RGB hex code or predefined name face – font family size – number • This tag is not supported in HTML 5, use CSS instead

HTML TAGS - <BODY> SECTION • A <font></font> tag example:

HTML TAGS - <BODY> SECTION • Line breaks • • • HTML ignores line breaks in the HTML file A tag is used to force a line break The tag is singular, it has no closing tag

HTML TAGS - <BODY> SECTION • Commenting is used (and should be used!) whenever we want to document sections of code in our document <!-- Insert comment here -->

HTML TAGS - <BODY> SECTION • General layout design (content tags)

HTML TAGS - <BODY> SECTION • General layout design (content tags)

HTML TAGS - <BODY> SECTION • The <a></a> tag creates links to other pages on our website or to other websites • Common attributes • • href – address being linked to target – window/tab the link opens in

HTML TAGS - <BODY> SECTION • The <a></a> tag creates links to other pages on our website or to other websites

HTML TAGS - <BODY> SECTION • The <a></a> tag can also be used to create anchor points on a page

HTML TAGS - <BODY> SECTION • The <a></a> tag can also be used to create anchor points on a page

HTML TAGS - <BODY> SECTION • The <img> tag displays images on our website • Common attributes • • • src – source of the image (link or file name/location) alt – alternate text in case the image is not found height, width – dimensional information

HTML TAGS - <BODY> SECTION • The <img> tag displays images on our website

HTML TAGS - <BODY> SECTION • The <img> tag displays images on our website Remember to keep the aspect ratio (Don’t squish the panda!) You can achieve this by setting just either the height or the width (HTML will automatically adjust the other dimension to keep the aspect ratio).

HTML TAGS - <BODY> SECTION • The <video></video> tag can be used to insert or link to video files, and has the following attributes: • • src – video file source controls – if specified, controls will be enabled poster – video thumbnail image file autoplay – if specified, autoplays the video on load (don’t!) • • loop – if specified, automatically loops the video height/width – dimensional information

HTML TAGS - <BODY> SECTION • The <video></video> tag can be used to insert or link to video files

HTML TAGS - <BODY> SECTION • Inserting a You. Tube video: • • Below the video click “Share” – “Embed” Copy the HTML code and use it in your website

HTML TAGS - <BODY> SECTION • The <ul></ul> tag will define an “unordered” list, with each element being marked as a list element <li></li>

HTML TAGS - <BODY> SECTION • The <ol></ol> tag will define an “ordered” list, with each element being marked as a list element <li></li>

HTML TAGS - <BODY> SECTION • The <ol></ol> tag will define an “ordered” list, with each element being marked as a list element <li></li> • Attributes: • type • • • “ 1” – Arabic numerals “A”, “a” – letters “I”, “i” – Roman numerals • Lists can be embedded

HTML TAGS - <BODY> SECTION • The <dl></dl> tag will define a “description” list, with each described element being marked as a description term <dt></dt> and its corresponding description as a description definition <dd></dd>

HTML TAGS - <BODY> SECTION • The <table></table> tag will define a table containing table rows <tr></tr> and table data (cells) <td></td>

HTML TAGS - <BODY> SECTION • The <caption></caption > tags can be used to add a table caption • The <th></th> tags can be used to define table headers

HTML TAGS - <BODY> SECTION • The <thead></thead > and <tbody></tbody > tags can be used to delimit table headers and bodies

HTML TAGS - <BODY> SECTION • The <table></table> tag used to have attributes such as “align”, “border”, “cellpadding”, “cellspacing”, etc. , however, these are not supported in HTML 5

HTML TAGS - <BODY> SECTION • HTML has two basic ways of displaying elements: • Block elements – take up the entire width of the page (e. g. : paragraphs) • Inline elements – take up only as much space as they need (e. g. : links)

HTML TAGS - <BODY> SECTION • Containers are used to “hold” different parts of the HTML page • Most commonly used containers: • • <span></span> - inline containers <div></div> - block containers

HTML TAGS - <BODY> SECTION

HTML TAGS - <BODY> SECTION • Using the <form> </form> tags, forms can be defined • The <input /> tag can be used to define different types of inputs from the user, with the following attributes: • • • type – input type (button, checkbox, color, datetime -local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week) value – default value of the input required – input field must be filled before submitting

HTML TAGS - <BODY> SECTION

HTML GLOBAL DATA ATTRIBUTE • The data-* attributes is used to store custom data private to the page or application • The data-* attributes gives us the ability to embed custom data attributes on all HTML elements • The stored (custom) data can then be used in the page's Java. Script to create a more engaging user experience (without any Ajax calls or server-side database queries) • The data-* attributes consist of two parts: • The attribute name should not contain any uppercase letters, and must be at least one character long after the prefix "data-" • The attribute value can be any string

HTML GLOBAL DATA ATTRIBUTE

CHOOSING AN EDITOR Notepad + + - Free Preinstalled on all Windows systems No color coding Does not automatically add closing tags

CHOOSING AN EDITOR Notepad++ + + - Free Color coding Autocomplete Autosave Does not automatically add closing

CHOOSING AN EDITOR Programmer’s Notepad + + + - Free Color coding Automatically adds closing tags No autosave No autocomplete

CHOOSING AN EDITOR Sublime text + + - Color coding Automatically(-ish) adds closing tags Autocomplete Autosave Not completely free

CHOOSING AN EDITOR Microsoft Visual Studio + + Color coding Automatically adds closing tags Intelli. Sense and error detection Automatic indenting and formatting (Ctrl + K, D, Ctrl+Shift+F) + Free (Visual Studio Community)

BIBLIOGRAPHY • https: //www. w 3 schools. com/html/ • W 3 Schools HTML tutorial • https: //www. w 3 schools. com/tags/ • Exhaustive list of all HTML tags and their attributes • https: //code. visualstudio. com/ • Visual Studio Code download page • https: //code. visualstudio. com/docs/editor/emmet • Visual Studio Code Emmet abbreviations

COURSES Available online at: http: //www. ael. utcluj. ro/ Information for Students -> Courses -> Web Technologies