Computer Language
● A computer language is the common medium b/w a machine and programmer.
● The Computer languages are classified into 4 ways as follows:
○ Programming language
○ Scripting language
○ Query language
○ Markup language
Markup Language
● A markup language is a computer language that is used to structure and format a text
document by using Markup.
● There are 3 types of Markup languages available as follows:
○ Markdown
○ XML
○ HTML
Markup
● Markup is a sequence of characters or code or other symbols.
● Markup refers to tags and elements used within a document.
HTML
● HTML is the acronym for HyperText Markup Language, a standard markup language
used for creating the structure of web pages.
● HTML is used to create static web pages.
● HTML was invented by Tim Berners Lee in 1991, and maintained by the W3C
organization (World Wide Web Consultorium).
● The latest version is HTML5 released in 2014.
HyperText
● HyperText refers to a Clickable text.
● Web pages often contain hyperlinks.
Web Page
● A web page is a simple HTML document stored & displayable by a browser.
● The Web Page is of two types:
○ Static web page
○ Dynamic Web page
Static Web Page
● A static web page is a web page that is delivered to the user's web browser exactly as
created.
● In a static web page, data will not change until someone changes it manually.
● Ex: wikipedia
Dynamic Web Page
● A Dynamic Web page displays different content for different users while retaining the
same layout and design.
● Ex: Linkedin, instagram
Anatomy of HTML tags
● An HTML tag is a piece of markup language which is enclosed between the angular
brackets.
● HTML tags are keywords present on a web page that define how your web browser must
format and display the contents on screen.
● The HTML tag consists of 2 things:
○ Opening tag, or Start tag : A tag without a forward slash. Syntax: <tagName>
○ Closing tag, or end tag : A tag with a forward slash. Syntax: </tagName>
Container
● The opening tag along with the closing tag without any content is called a Container.
● Syntax: <tagName> </tagName>
Element
● The Opening tag along with the Content, & the closing tag together is known as HTML
Element.
Basic structure of an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
</body>
</html>
● <!DOCTYPE html>:
The doctype is associated with DTD. This declaration specifies the HTML version
being used, which in this case is HTML5.
● <html >
This is the root element of the HTML document. It represents the starting, and
ending of an html program. It contains two childs i.e. head and body.
● <head>:
This section contains meta-information about the HTML document, such as
character encoding, viewport settings, and the title of the page.
● <title>Page Title</title>:
This sets the title of the HTML document, which appears in the browser's
title bar or tab.
● <body>:
This is where the main content of the HTML document goes. It contains all the
visible elements that users see and interact with when they visit the webpage.
HTML Tags are classified :
1. Paired Tags or Container tags:
Paired tags have both opening and closing tags, and they enclose content
between them. For example, <p> and </p> in the above example.
2. Self-Closing Tags or Empty tags or Void tags or Unpaired tags:
Self-closing tags do not have a separate closing tag, and they are used to insert
elements that do not contain any content or do not require closing. For example,
<br> for a line break.
Heading Tags in html
● Heading tags in HTML are used to define the hierarchy and structure of content on a
web page.
● The HTML provides six levels of headings which range from <h1> to <h6>, with <h1>
being the largest and most important heading, and <h6> being the smallest and least
important.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Paragraph Tags
● paragraph tag in HTML, denoted by <p>, is used to define paragraphs of text within an
HTML document.
● Paragraphs are blocks of text that are separated from other content by vertical spacing.
● When the browser renders HTML containing paragraph tags, it automatically adds space
above and below the text within the <p> tags, visually separating it from surrounding
content.
<p>
This is the first paragraph of text. It might contain one or more
sentences.
</p>
<p>
This is another paragraph. It is separate from the previous
paragraph and
will appear below it.
</p>
Comments
● Comments are used to insert notes or annotations within the code that are ignored by
the web browser when rendering the webpage.
● They are helpful for documenting the purpose or functionality of certain sections of
HTML code, making it easier for developers to understand and maintain the codebase.
<!-- This is a comment →
Attributes
● Attributes provide additional information about an element and are specified within the
opening tag of the element.
● Attributes consist of a name and a value, separated by an equals sign (=), and are
enclosed within the element's opening tag in quotation marks (single or double).
<tagName attributeName="attributeValue">Content</tagName>
Marquee Tag
● <marquee> tag in HTML is used to create a scrolling or moving text or image effect
within a web page.
● It was commonly used in the past to create attention-grabbing animations, such as
scrolling text banners or images.
<marquee behavior="alternate" direction="left">Text or image content
here</marquee>
● behavior: Specifies the behavior of the scrolling content. Possible values include:
● scroll: Content continuously scrolls across the screen.
● slide: Content slides across the screen once and then stops.
● alternate: Content alternates between scrolling back and forth.
● direction: Specifies the direction of the scrolling content. Possible values include:
● left: Content scrolls from right to left.
● right: Content scrolls from left to right.
● up: Content scrolls from bottom to top.
● down: Content scrolls from top to bottom.
FORMATTING TAGS
● Formatting tags are the tags which provide visual appearance without using CSS.
● Formatting tags control
● The following are the some of the formatting tags:
1. Use of <b> and <i> Tags:
<b> and <i> tags were traditionally used for bold and italic formatting,
respectively.
However, they are considered presentational and semantically incorrect.
Instead, prefer <strong> for importance and <em> for emphasis.
2. <strong> and <em> Tags:
<strong> and <em> tags are used to indicate semantic importance and
emphasis, respectively.
They provide meaning to the text rather than just changing its appearance.
Screen readers and search engines interpret these tags differently from <b> and
<i>.
3. <u> Tag:
The <u> tag is used to underline text.
However, it's generally not recommended because underlined text is commonly
associated with hyperlinks.
4. <mark> tag:
The mark tag is used to highlight the text as we generally highlight the text in
notebooks.
By default, it will apply yellow color.
5. <sup> and <sub> Tags:
<sup> and <sub> tags are used to display superscript and subscript text,
respectively.
They are useful for mathematical equations, footnotes, and chemical formulas.
6. <small> and <big> Tags:
The <small> tag is used for smaller text compared to the normal one.
The <big> tag is used for larger text compared to the normal one.
7. <del> and <ins>:
The <del> and <ins> always work in combination.
The <del> is used for striking off the text.
The <ins> tag is used to insert text, usually underlined.
8. <pre> Tag:
The <pre> tag is used to preserve whitespace and line breaks within its content.
It's commonly used for displaying code snippets or other preformatted text.
9. <hr> Tag:
The <hr> tag is used to create a horizontal line or thematic break in the content.
It's often used to separate sections of a webpage.
10. <br> Tag:
The <br> tag is used to create a line break within a paragraph.
It should be used sparingly, and CSS should be preferred for controlling spacing
between elements.
Break Tag
● Break tag in HTML is used to insert a single line break within the text content of an
HTML document.
<p>This is the first line of text.<br>This is the second line of
text.</p>
Hr Tag
● The <hr> tag in HTML is used to create a horizontal rule, also known as a horizontal line
or divider, within the content of an HTML document.
● It is a self-closing tag.
● When the browser renders the HTML, it displays a horizontal line across the width of its
containing element, typically to visually separate sections of content.
Pre Tag
● The pre tag in HTML stands for "preformatted text".
● It is used to display text exactly as it appears in the HTML code, preserving both spaces
and line breaks.
● This tag is particularly useful for displaying code snippets, ASCII art, or any text where
maintaining the original formatting is important.
<pre>
class Main {
public static void main(String[] args) {
[Link]("");
}
}
</pre>
Flow layout
The Flow Layout is the fundamental building block that defines how content is displayed on a
web page. This includes:
1. Block-Level Elements:
a. Block-level elements in HTML are elements that, by default, start on a new line
and occupy the full width available to them.
b. They create "blocks" of content on a webpage, and typically respect some top &
bottom margins, creating space b/w the content.
c. Block-level elements such as <div>, <p>, <h1> to <h6> always start on a new
line.
2. Inline-level Elements:
a. Inline elements in HTML are elements that do not start on a new line and only
occupy as much width as necessary.
b. They flow within the text or other inline elements.
c. Inline elements, such as <span>, <a>, <strong>, <em> do not start on a new line.