Front-End
Engineerin
g class 1
Presented by - Esther Joshua
Table of contents
01 How the Internet
Works
Understanding HTML basics
02
Understanding Semantic
03 Elements
Learning Objectives
Participants will learn the fundamental structure of HTML documents, including the use
01
of elements, tags, and attributes. They will understand how to create a basic HTML
document, including the <html>, <head>, and <body> tags, and how to structure
content using headings, paragraphs, lists, and other common HTML elements.
Participants will learn how to create and style web content using HTML and basic CSS.
02 They will understand how to use HTML tags to create various types of content, such as
text, images, links, and forms, and how to apply CSS styles to modify the appearance of
these elements, including properties like color, font, size, and layout.
Participants will gain an understanding of basic web development best practices, including
03 semantic HTML markup.
Executive
summary
Esther Joshua.
Armed with a bachelor of science in Management
Information System from Covenant University, I
have honed my skills through diverse experience
even as a young professional. My dedication and
strategic mindset to deliver results has placed me
in rooms beyond my years.
My career journey began with web development
and design using html,css, js and php during my
college years. I then transitioned into other areas
of Technology.
With all said, Welcome to my Class!
01
How the Internet work
The Internet
Definition
The internet is a global network of interconnected computers.
It allows for the transfer of data between devices using various protocols
The Internet is the backbone of the Web, the technical infrastructure that
makes the Web possible.
At its most basic, the Internet is a large network of computers which
communicate all together.
The Internet
Difference between Web page,
Website and Web server
Web Page
A document which can be displayed in a web browser such as Firefox,
Google Chrome, Opera, Microsoft Edge, or Apple Safari. These are also
often called just "pages." Web page is a text file containing HTML (HTML
– Hyper Text Markup Language)
Website
A collection of web pages which are grouped together and usually
connected together in various ways. Often called a "website" or a "site."
Web server
A computer that hosts a website on the Internet
The Internet
WEB PAGE
A web page is a simple document displayable by a browser. Such
documents are written in the HTML language (which we look into in more
detail in other articles). A web page can embed a variety of different
types of resources such as:
style information(CSS)— controlling a page's look-and-feel
scripts(JS)— which add interactivity to the page
media — images, sounds, and videos.
02
Understanding basic
HTML tags
Introduction to HTML
• With HTML you can create your own Web site.
• HTML stands for Hyper Text Markup Language.
• HTML is derived from a language SGML (Standard Graphics Markup Language).
• The future of HTML is XML (eXtended Markup Language).
• HTML is not a programming language, it is a Markup Language.
• A markup language is a set of markup tags.
• HTML uses markup tags to describe web pages.
• HTML is not case sensitive language.
• HTML documents contain HTML tags and plain text.
Introduction to HTML
An HTML file must have an .htm or .html file extension.
HTML files can be created with text editors: “NotePad, NotePad ++, TextPad, Bracket”
Or HTML editors (WYSIWYG Editors):
• Microsoft FrontPage
• Macromedia Dreamweaver
• Netscape Composer
• Expression Web
For this Class, We would be using Visual Studio 2017. Kindly download and Install the
application.
Introduction to HTML
A tag is always enclosed in angle bracket <>like <HTML>
HTML tags normally come in pairs like <HTML> and </HTML> i.e.
Start tag = <HTML>
End tag =</HTML>
Start and end tags are also called opening tags and closing tags
<HTML> - Describe HTML web page that is to be viewed by a web browser.
<HEAD> - This defines the header section of the page.
<TITLE> - This shows a caption in the title bar of the page.
<BODY> - This tag show contents of the web page will be displayed.
HTML TAGS
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<super> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<tt> Defines teletype text
<u> Defines underline text
<strike>. Defines strike text
Simple Code
FONT TAG
• This element is used to format the size, typeface and color of the enclosed text.
• The commonly used fonts for web pages are Arial, Comic Sans MS , Lucida Sans
Unicode, Arial Black, Courier New, Times New Roman, Arial Narrow, Impact, Verdana.
• The size attribute in font tag takes v
• A sample code:
<html>
<head><title> fonts</title></head>
<body>
<br><font color=“green" size="7" face="Arial"> GLOBAL INFORMATION CHANNEL </font>
<br><font color=“green" size="6" face="Comic Sans MS "> GLOBAL INFORMATION CHANNEL
</font>
</body>
</html>
QUICK QUESTION TIME
BACKGROUND TEXT ALIGNMENT
How do you code “background How do you align text in html to
colour = green ” in html? the center, left and right?
HYPER LINK IMAGE TAG
• What are hyperlinks? How do you add images to your
code?
• How do you add links to your
code?
BLOCK LEVEL AND INLINE ELEMENTS
• A block-level element always starts on a new line, and the browsers
automatically add some space (a margin) before and after the element.A
block-level element always takes up the full width available (stretches out to
the left and right as far as it can). Two commonly used block elements are:
<p> and <div>.
• An inline element does not start on a new line. An inline element only takes
up as much width as necessary. This is a <span> element inside a
paragraph. Examples include, <script><select><small><span>
03
Understanding
Semantic HTML
SEMANTIC ELEMENTS
• Elements such as <header>, <footer> and <article> are all considered
semantic because they accurately describe the purpose of the element and
the type of content that is inside them.
• Elements such as <header>, <nav>, <section>, <article>, <aside>, and
<footer> act more or less like <div> elements. They group other elements
together into page sections. However where a <div> tag could contain any
type of information, it is easy to identify what sort of information would go in
a semantic <header> region.
SEMANTIC ELEMENTS
• This is an example of a code with semantic elements.
header></header>
<section>
<article>
<figure>
<img>
<figcaption></figcaption>
</figure>
</article>
</section>
<footer></footer>
SEMANTIC ELEMENTS
• This is an example of a code with NO semantic elements.
<div id="header"></div>
<div class="section">
<div class="article">
<div class="figure">
<img>
<div class="figcaption"></div>
</div>
</div>
</div>
<div id="footer"></div>
04
Learning
Resources
Learning Resources
• Learn HTML – Full Tutorial for Beginners (2022)
https://www.youtube.com/watch?v=kUMe1FH4CHE
• HTML Tutorial
https://www.w3schools.com/html/
You can also play around with VS 2019.
05
Conclusion
In conclusion
HTML is a fundamental component of web design, dictating
the structure and content of web pages.
Understanding how the internet works is crucial for
effective web design and development.
These slides provide a basic overview of HTML's role in web
design and how the internet facilitates the delivery of web
content
Thanks!
Do you have any questions
Send me a message
[email protected]
+234 9123 121 243
