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 <sub></sub> Subscript <sup></sup> 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
- Slides: 81