# data[].attributes.body
HTML stands for Hypertext Markup Language. Markup Languages are not the same as programming languages. They use tags to annotate documents. the tags indicate where headings, images, lists, links, line breaks, and other components should go. When opening a page on the Internet browser, it is an interpretation of HTML.

# data[].attributes.body
1993 HTML 1.0 - It was the first version of HTML. It was a very limited version and you could do nothing more interesting as the page as very simple with texts.

1995 HTML 2.0 - This specifications supported more browsers as tables could be used, background page could be changed and text boxes & option buttons were available.

1997 HTML 3.2 was endorsed by the W3 Consortium - Included significant browsers such as Netscape and Microsoft, “HTML 3.2
included tables, applets, text flow around images, subscripts and superscripts.

1999 HTML 4.01 - It supported style sheets and scripting ability for multimedia elements. HTML 4.01 focused on separating presentation styling information from the
actual content by the use of style sheets.

2012 HTML 5 - It is the current version. It can be used to write web application that stills works when you're not using the net. It locates your current location. It supports high definition video. It is supported by biggest browsers such as Chrome, Firefox, Safari, Internet Explorer, Opera and Edge.

# data[].attributes.body
When we type an URL(Uniform Resource Locator) in the browser, the browser will look for a IP address of the domain name in the DNS(Domain Name Server). DNS is a list of URLs and their IP addresses. When the browser receives the IP address, it will build a connection between the browser and the server using the internet protocol.

# data[].attributes.body
We were taught how the relationship works between the client and the server. We came across about how an http request works.

# data[].attributes.body
We learned that learning HTML, CSS and javascipt is best way to become software engineering. to define and structure web page data have widened up possibilities- greater emphasis on multimedia, mobile web, geolocation, and more.

# data[].attributes.body
In this topic, we learned how a basic HTML is structured on step by step. There are 3 types of a well-formed HTML, the Doctype (Version of the HTML that you will be using), Head  (Metadata (or extra information)) and Body (Displayable content).

DOCTYPE HTML

We learned what is an Doctype Html and how to use it. It is an instruction to the web browser about what version of HTML the page is written in. The DOCTYPE is supposed to tell the browser which version of HTML is being used so it knows which version of the syntax to analyse.
We were given some examples in the notes shared on google classroom

Head and Body

We learned what we need to write in this step which is in the notes. We were given several examples.

# data[].attributes.body
We learned what is an element in HTML 5   and how to use brackets, tags and how to  use it to write code.

We learned that there are 7 types of content categories:
1. Metadata
2. Embedded
3. Interactive
4. Heading
5. Phrasing
6. Flow
7. Sectioning

We learned about each of these content and how they are use in HTML.

# data[].attributes.body
Except for empty elements, most of the elements can contain any number of further elements which are, in turn, made up of tags, attributes, and content or other elements. This is called Nested Elements.

example: <p><strong>this is correctly nested</strong></p>

# data[].attributes.body
we learned what is inline and block elements and encountered some examples. Examples are shown in the lecture notes on google classroom.

# data[].attributes.body
Today we also learned that there are specific programs to work with coding and visual code studio is one of them and perhaps it is the best one to use.

# data[].attributes.body
We learned that there are 3 types of list to use based on how our content needs to be organized and grouped together.
• Ordered list
• Unordered list
• Definition list

# data[].attributes.body
HTML and XHTML supports a list style which is called definition lists where entries are listed like in a dictionary or encyclopedia.
• Definition List makes use of following three tags.
<dl> − Defines the start of the list
<dt> − A term
<dd> − Term definition
</dl> − Defines the end of the list

We were given an example to understand it clearly.

# data[].attributes.body
We learnt different types of image formats

# data[].attributes.body
We learnt that <img> tag is used to insert an image and it requires 2 attributes:
1. Src Attribute
src= Specifies the path to the image.

We learnt that the src attribute specifies the location of the image. The image URL can also be defined by using the scr attribute. Their HTML syntax is :
<img src=“image.jpg”>

2.  ALT Attribute
alt= Specifies an alternate text for the image.
The ALT attribute is provides an alternate text for an image if the user cannot view the image(in case of a slow connection.
Ex :
<img src=“MangoTree.jpg" alt=“mango tree">

# data[].attributes.body
We learned file path is described as the the location of a file in a web site's folder structure. There are two types of file path:
1. Absolute - A path that starts from the root of your file system. It contains the full URL of
a file. It refers to the same location in a file system relative to the root directory
1. Relative - A relative path only points to a file or a file path. When the user clicks a relative
link, the browser takes them to that location on the current site.

# data[].attributes.headline
Image located on another folder, width and size

# data[].attributes.subject
Image located on another folder, width and size

# data[].attributes.body
Image size: <img src="img_girl.jpg" alt="Girl in a jacket" width="500"
height="600">

Image attributes, width and height: <img src="images/img_icon.jpg" alt="icon excited"
style="width:500px;height:600px;">

Image attribute, style/width and height: <img src="images/img_icon.jpg" alt="icon excited"
style="width:500px;height:600px;">

<img src="images/img_icon.jpg" alt="icon excited"
width=“500px” height= “600px”>

# data[].attributes.body
With links you can navigate to sections of a single HTML page. It uses the following syntax:
<a href="#top">Back to top</a>
The pound sign (#) indicates that you’re pointing to a spot on the same page, not on another page. Why using? Web sites with long pages can help the user save time while scrolling back to top by pressing the 'back to top'.

# data[].attributes.headline
Importing audio in HTML AND Importing video in HTML

# data[].attributes.subject
Importing audio in HTML AND Importing video in HTML

# data[].attributes.body
We learned how to import and resize any type of video in a webpage. We coded in VS Code and preview it in our basic web browser.

# data[].attributes.body
Semantics is the study of the relationship between words and phrases in
language and how we draw meaning from those words.

What is semantic in HTML.
Adding information to your pages with semantic HTML tags helps browsers like Google and Bing, as well as screen readers, comprehend the responsibilities and relative importance of the various components of your website.

Why using semantics in HTML?
1. It makes the code easier to maintain.
2. Important to screen readers.
3. Helps crawlers (spider or spiderbot) better understand the structure of the page.

& tags

Hrithik Kumar Peertheea
3mo

<div> & <span> tags

<div> tag
We learnt that the <div> tag, is a "generic container for flow content that by itself does not represent anything". All web pages are divided into sections that have different functions. The <div> tag can be easily styled with class or id attribute.

<span> tag
<span> tag is an inline container used to mark up a part of a text, or a part
of a document. (inline element).
<span> is easily styled by CSS or manipulated with JavaScript using the class or id attribute.

# data[].attributes.body
<strong> versus <b> tag
<strong> tag suggest strong importance of the content. Browsers typically render the contents in bold type. <b> only visually displays the content bold without having any meaning.

<em> versus<i> tag
The <em> tag is used to add emphasis to a text. <i> tag known as i or italics element represents a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, taxonomical designations.

# data[].attributes.body
The <header> element defines content that should be considered the introductory information of a page or section.

# data[].attributes.body
We learned that the <main> tag is actually a new addition to the HTML5 specification. If you’ve ever used a <div id=”main”></div> or <div id=”wrapper”></div> around your content before, the <main> tag essentially replaces it.

# data[].attributes.body
A section that contains info such as copyright data, related documents, and links to social media

# data[].attributes.body
They are used to group your content.

<article>
The HTML <article> tag is an HTML5 element that defines a self-contained composition
in the HTML document. The article element should be used when the content is an
independent part of the site that can be independent and be syndicated as an article or blog post.

<section>
The HTML <section> tag is an HTML5 element that defines a generic section in the HTML document.

The <article> tag goes in the <body> tag.

The <article> tag can be used for any of the following: forum post, blog entry, magazine article, newspaper article, user comment, or an independent content item.

# data[].attributes.body
HTML table

We learned that when we are structuring tables, the HMTL markup is basically structured with row and cells.

The HTML <table> element represents tabular data. Other related elements include <tr>, <td>, <th>.
The tag for rows is <tr> (abbreviation for table row) and the tag for each cell is <td> (which stands for table data, and this is where the actual content is.

<thead>
The <thead> tag is used in conjunction with the <tbody> tag and the <tfoot> tag in determining each part of the table (header, footer, body). thead, tbody, and the tableheadings only add semantic value. We were given an small activity to do in class. This gave us an practice and it was a bit challenging to write because often it gets confusing.

Cellpadding and Cellspacing
Cellpadding specifies the space between the cell content and its borders.

# data[].attributes.body
We did a practical test in creating a table by adding rows, columns and spaces in between the rows.

# data[].attributes.body
We learned how the forms are processed. In order to process a form, we need to learn to create programs which is beyond our programming language. So CGI, Common Gateway Interface acts as a bridge between the server and browser. We also learnt action and method attribute and how to implement them into vs code.

# data[].attributes.headline
Action & Method attribute with GET & POST method

# data[].attributes.subject
Action & Method attribute with GET & POST method

# data[].attributes.body
We learnt that the Action attribute specifies the URL of the CGI program that will decode the information. The Method attribute specifies how the server will send the information. There are two methods in this case called the GET & POST. We learnt how these 2 methods work in their own way and how we can use them in a writing code.

# data[].attributes.body
Today we learned about :
Select list / Drop-down, List-box, Passwords and Placeholders as they all play a major role when creating a form.

# data[].attributes.body
We also learned the "Fieldset" element and the "Legend" element to create form and even classwork were given to us

# data[].attributes.body
We learnt that CSS, Cascading Style Sheets is use to style web pages. It help to change the look of an web page by using spacing, color, fonts and layout.

# data[].attributes.body
Today we learned that comments are used to make someone understand the scripts but are ignored by the browsers.

# data[].attributes.body
Today we learned about how important cascading is and how it behaves and also the rules

# data[].attributes.body
Then we learned about concept of inheritance.

Also known as parent-child
relationship
All elements in an HTML
document can be both parent and
child except for the body which is
the parent.
A parent is an element that is
directly above and connected to
an element in the document tree

# data[].attributes.body
Today we learned about descendant selector.

The descendant selector matches all elements that are descendants
of a specified element.

The descendant selector is a way to select elements that are located
somewhere underneath other elements, according to the tree
structure of the webpage.

The term ‘descendants’ targets HTML elements which are offspring
such that the targeted elements are based on the relationship of
HTML document.

# data[].attributes.body
A CSS selector can contain more than one simple selector

CSS provides some special combinators with other selectors in a way
that gives them a useful relationship to each other and the location of
content in the document.

There are four different combinators in CSS:

descendant selector (space)

child selector (>)

adjacent sibling selector (+)

general sibling selector (~)

# data[].attributes.body
Today we learned about  pseudo-class.
A pseudo-class is a selector that assists in the selection of something that cannot be
expressed by a simple selector.
CSS pseudo-classes are used to add special effects to some selectors. No need to use
JavaScript or any other script to use those effects.
Pseudo-classes can also be combined with HTML classes

# data[].attributes.body
Today we learned about CSS Units.

# data[].attributes.body
There are two types of length units: absolute and relative.
Absolute Units- Units that are “absolute” are the same size regardless of the
parent element or window size.

i.e a property set with a value that has an absolute unit will be that size
when looked at on a phone or on a large monitor. Same size across
different devices.

Relative Units- Relative length units are relative to another element's size or
settings.

e.g the relative font size of an element may be calculated using the parent
element's font size.

# data[].attributes.body
We also learned about layouts

# data[].attributes.body
• Responsive is fluid and adapts to the size of the screen no matter what the
target device. Responsive uses CSS media queries to change styles based
on the target device such as display type, width, height, etc., and only one of
these is necessary for the site to adapt to different screens.
• Responsive web design requires more CSS (and sometimes JavaScript)
than a basic fluid layout, but it also provides more control over layout of the
page.
• Adaptive detects the screen size and load the appropriate layout for it

# data[].attributes.body
Today we were introduced to Javascript.

# data[].attributes.body
Pros:
• Allows more dynamic HTML pages, even complete web applications
Cons:
• Requires a JavaScript-enabled browser
• Requires a client who trusts the server enough to run the code the server
provides

# data[].attributes.body
We were given some homework to help us understand more about Javascript.

# data[].attributes.headline
Global, local(function) and Block variable scopes

# data[].attributes.subject
Global, local(function) and Block variable scopes

# data[].attributes.body
Local and Global variables

• Scope determines the accessibility (visibility) of these variables.
-In JavaScript there are three types of scope:
• Local scope
• Global scope
• Block scope

# data[].attributes.body
Today we learned about Form validation.
What is validation?
• Validation is a method to authenticate the user.
• Form validation normally used to occur at the server, after the client had entered all the
necessary data and then pressed the Submit button. If the data entered by a client was
incorrect or was simply missing, the server would have to send all the data back to the client
and request that the form be resubmitted with correct information. This was really a lengthy
process which used to put a lot of burden on the server.
• JavaScript provides the facility to validate the form on the client-side.
• Through JavaScript, we can validate name, password, email, date, mobile numbers and more
fields.
• The data information from the client side is first sent to the server side.

# data[].attributes.body
Form data that typically are checked by a JavaScript could be:

• has the user left required fields empty?
• has the user entered a valid e-mail address?
• has the user entered a valid date?
• has the user entered text in a numeric field?

# data[].attributes.body
For learning activity 3 we are suppose to use our knowledge of CSS to style the following pages (home page, menu page, jobs page and music page).

# data[].attributes.body
For this learning activity we were suppose to use our knowledge of HTML, CSS and JavaScript, you will design a registration form for an event.

# data[].attributes.body
For the end module assignment the objective of this assignment is to allow you to demonstrate our understanding and skills gained in the module ‘Basic Web Scripting. Having learnt about HTML5, CSS and JavaScript.