Web technologies-course 02

2. COURSE 02
HTML
lect. eng. Rajmond JÁNÓ, PhD
rajmond.jano@ael.utcl
uj.ro
fb.com/janorajmond

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

4. 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
page1.html
page2.html Server
User

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

6. 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
page1.html
Server
User

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

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

9. 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)
page1.html
Server
User

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

11. 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

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

13. WEBSITE DESIGN

14. 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

15. 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

16. HTML
Source HTML document
Rendered in Firefox

17. 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

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

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

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

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

22. 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>

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

24. 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

25. 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

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

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

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

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

30. 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

31. 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

32. 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.

33. 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

34. HTML TAGS - <HEAD> SECTION

35. HTML TAGS - <HEAD> SECTION
• Setting the Viewport
• HTML5 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.

36. 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

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

38. HTML TAGS - <BODY> SECTION
• Heading tags – used for titles, sections, etc.
• From <h1></h1> down to <h6></h6>

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

40. HTML TAGS - <BODY> SECTION
• Text formatting tags
HTML 5 Replaces Description
<em></em> <i></i> Emphasis
(italics)
<strong></stro
ng>
<b></b> Strong (bold)
<mark></mark
>
Highlights
<code></code
>
Computer code
<q></q> Quotation
<del></del> <s></s>
<strike></strik
Strike through
(deleted)

41. HTML TAGS - <BODY> SECTION
• Text formatting tags

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

43. 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 HTML5, use CSS
instead

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

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

46. 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 -->

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

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

49. 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

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

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

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

53. 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

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

55. 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).

56. 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

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

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

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

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

61. 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

62. 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>

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

64. 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

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

66. 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 HTML5

67. 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)

68. 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

69. HTML TAGS - <BODY> SECTION

70. 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, date,
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

71. HTML TAGS - <BODY> SECTION

72. 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 JavaScript 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

73. HTML GLOBAL DATA ATTRIBUTE

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

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

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

77. CHOOSING AN EDITOR
Sublime text
+ Color coding
+ Automatically(-ish) adds closing
tags
+ Autocomplete
+ Autosave

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

79. BIBLIOGRAPHY
• https://www.w3schools.com/html/
• W3 Schools HTML tutorial
• https://www.w3schools.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/em
met
• Visual Studio Code Emmet abbreviations

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