Front-End (HTML Advance)

Course link:- https://app.pluralsight.com/player?course=html-fundamentals&author=matt-milner&name=html-fundamentals-m1-text&clip=8&mode=live

HTML Fundamentals introduction

Introduction:-

Internet is basically a connection of computers. World wide web is made up of a few things.

HTML is a document which we used to share between the computers back at that time.

URL—Universal Resource Locator

HTTP—Hypertext transfer protocol(taking HTML documents and exchanging them)

(Question:- What is TCPIP?)

HTML has text-data-images all linked together

HTML is a markup language

<body>

This is the point where we will see the content of the site

</body>

XHTML is a revision of HTML and an advanced form of XML

validator.w3.org validates our input

The browser will use the metadata field but not the user

<head>  -metadata

1.<title>

This will have the title of the document HTML which will mostly help the browser

</title>

<meta>

includes metadata such as “keywords”

<style>

defines the style to apply to body elements

</style>

<link>

this is the directive indicating related documents

<base>

defines the base address regarding all the links on the page

Now we will practice this ( <head> )

Question: What is http-equiv=”Content-type” content=”text/html;charset=UTF-8″/>

Now we will move towards the body element .We have saved our site on the desktop 🙂

Headings

Text

Lists

Links

Tables

Images/objects

We use id along with scripting and also along with styling

An item has a specific id

but more than one item can have a same class

Headings:-

Include only one per page, this will the search centres to find your page easily

We are now focusing on block elements and inline elements

Block elements:-

-Container elements for grouping

-May contain other block elements and inline elements

-Inline elements:-

-Container for text and other inline elements

<div> is an item which is pretty common and now we will be explaining the concept of block elements

vs inline elements in detail

We use &nbsp for white space regulation.

This will be used in cases where we want to use <div> in the <p></p> portion.

This is about a major additional text feature which tells us the full form against an acronym.

<sup></sup> this tag is used to put a superscript here

This is a <blockquote> tag which also ignores the space between two words and presents the paragraph in a special way which shows that it is a quote. 

.

The right way to comment on HTML is as follows :-

This will give color “Green” to the acronym.

List is an important part of HTML where you can have unordered lists,ordered lists and term/definition lists.

The output of this code is as under

This code would present  the definitions in a suave manner.

The output is as under :-

This is the linking concept. “. before (\intro.html) signifies that the file is in the same directory.

To view some content within the document we will use the following two steps .First we will use this:-

And then we will give the reference to the link on the top :-

The line “See the content on the linking concept by clicking here” would take us to the bottom or at the place where the that link is in the .html file. In this way we have learned both inter-html access and intra-html access. 

Additional info:-

                          The text in Blue are the links which we called the  “Hyperlinks”

Additional info:-

                       <table summary= “this table lists the various elements” >

In this line (summary) is the attribute

                                                              Tables

This has <thead> i.e the heading of the table,<tbody> i.e the body of the table.<tfoot> i.e the foot of the table. This is the code which will generate the following output:-

<table border= “1” > will create a border around the table.

Formatting tables

This tells us how to include objects and images etc.

<img src=”.\image.jpg” alt=”Talha Zaheer ” height=”150″ width=”200″ class=”center”>

And in the style tag we will write:-

.center {

display: block;

margin-left: auto;

margin-right: auto;

width: 50%;

}

This is the object inclusion like Silverlight or Adobe flash. Practice this too.