Developers Fundamentals: - Location of The Server. - How Many Trips? - Size of Files

Developers Fundamentals
• Location of the server.

• How many trips?
• Size of files.
Farrukh Ehsan - YouTube.com/c/iSaani -

www.farrukhehsan.com
www (World Wide Web)
• It is network of online contents which are formatted in HTML. This
term refers to all the interlinked HTML pages that can be accessed over
the internet.
• The world wide web often referred as ‘’the web”.

How Do Websites Work?

Code Files

HTML Code File
• This file is responsible for the structure of your website.
• For example is a website is a house then HTML will be the builder that build
the structure of your house.
• Similarly when you write the HTML code for your website, it develop the
structure of your website.
• You can use the HTML to add an image, button, textbox or whatever you want
to add in your webpage.

CSS Code Files
• These files are responsible for styling your webpages.
• So if you are building a house these would be painters and decorators.
• Similar is the job of CSS code as well, when you incorporate the CSS code, it
allows you to specify that how your website look.

JavaScript Code Files
• This is the code that actually allows your website to do things or have
behaviour.
• If you are building a house then you will have electrician, and it connects the
wires so that you can switch on your blubs etc.
• For example if I added a button into my website with HTML code, and stylized
with CSS code, only when I have a JavaScript code I will be able to make my
button to do something interesting.

How Do Websites Works?

Integrated Development Environment

Introduction to HTML

HTML
• HTML stands for hyper text markup language.
Hypertext:-
• It is a way in which web pages (html documents) are linked together, and the
links available on a webpage is called hyper text.
• HTML is a markup language in which you can mark up a text document
with ‘”Tags”. Tags tell the web browsers that how to structure this web
page or website.

Mark Up
Mark ups were use in script by the editors
to ask for changes in the documents or to
define the structure for the publishers.

HTML
• HTML is not a programming language. You can’t use the different
programming structures such as if-else, loops etc. with it.
• This language is strictly related to presentation there is no logic or actual
programming in HTML.

Anatomy of HTML Tags

Anatomy of HTML Tags

Basic HTML document

Basic HTML Document Structure
<!DOCTYPE html>
• This document type and html version.
<html>
• This tag enclose the complete html document.
<head>
• This tag represent the html header and keeps the other html tags such as <title>
<link> etc.
<title>
• This tag is used inside the <head> tag to mention the title of the document or a
html page.

Basic HTML Document Structure
<body>
• This tag represents the body the complete html document and can keep other html tags
such <h1>, <div>, <p> etc.
• It is recommended to use the lower case tags.

<!DOCTYPE html>
• This tag is used by browsers to understand the version of the html used in
the document.
• Current version of the html if HTML 5 and it uses the uses the following
declaration.
<!DOCTYPE html>

What do we need to start?
• Web Browser
• Google Chrome
• Mozilla Firefox
• Safari
• Edge
• Text Editor
• Sublime Text
• Atom.io
• Visual Studio Code
• Brackets
• Notepad ++ (Windows)
• Text mate (MAC)

Creating an HTML File
• It doesn’t need a server
• File must end with .html extension
• Run in web browser
• Index.html is the root/home page of a website
• Note
• When your website will be ready to deploy to internet then you will need a
domain name, hosting package and you will need to upload everything to
your web host.

HTML Comments Example

Heading Tags
• Any document starts with a heading. You can use different sizes for your
headings.
• HTML also has six levels of headings, which use the elements <h1>, <h2>,
<h3>, <h4>, <h5>, and <h6>.
• While displaying any heading, browser adds one line before and one line after
that heading.

HTML Headings Example

Paragraph Tag
• The <p> tag offers a way to structure your text into different paragraphs.
• Each paragraph of text should go in between an opening <p> and a closing
</p>

Paragraph Tag Example

Line Break Tag
• Whenever you use the <br> element, anything following it starts from the
next line.
• This tag is an example of an empty element, where you do not need opening
and closing tags, as there is nothing to go in between them.
• The <br /> tag has a space between the characters br and the forward slash.
• If you omit this space, older browsers will have trouble rendering the line
break, while if you miss the forward slash character and just use <br> it is not
valid in XHTML.

Line Break Tag Example

Centering Content
• You can use <center> tag to put any content in the center of the page or any
table cell.

Centering Content Example

Horizontal Lines
• Horizontal lines are used to visually break-up sections of a document.
• The <hr> tag creates a line from the current position in the document to the
right margin and breaks the line accordingly.
• Again <hr /> tag is an example of the empty element, where you do not need
opening and closing tags, as there is nothing to go in between them.
• The <hr /> element has a space between the characters hr and the forward
slash. If you omit this space, older browsers will have trouble rendering the
horizontal line, while if you miss the forward slash character and just
use <hr> it is not valid in XHTML

Horizontal Lines Example

Preserve Formatting
• Sometimes, you want your text to follow the exact format of how it is written
in the HTML document. In these cases, you can use the preformatted
tag <pre>.
• Any text between the opening <pre> tag and the closing </pre> tag will
preserve the formatting of the source document.

Preserve Formatting Example

Nonbreaking Spaces
• Suppose you want to use the phrase "12 Angry Men." Here, you would not
want a browser to split the "12, Angry" and "Men" across two lines.
• In cases, where you do not want the client browser to break text, you should
use a nonbreaking space entity instead of a normal space.

Nonbreaking Spaces Example

HTML - Elements
• An HTML element is defined by a starting tag.
• If the element contains other content, it ends with a closing tag, where the
element name is preceded by a forward slash.

Void Elements
• There are some HTML elements which don't need to be closed, such
as <img.../>, <hr /> and <br />elements. These are known as void
elements.

Nested HTML Elements
• It is very much allowed to keep one HTML element inside another
HTML element.

HTML - Attributes
• HTML tags can also have attributes, which are extra bits of information.
• An attribute is used to define the characteristics of an HTML element and
is placed inside the element's opening tag.
• All attributes are made up of two parts − a name and a value:
• The name is the property you want to set. For example, the
paragraph <p> element in the example carries an attribute whose
name is align, which you can use to indicate the alignment of
paragraph on the page.
• The value is what you want the value of the property to be set and
always put within quotations.

Core Attributes
• The four core attributes that can be used on the majority of HTML
elements (although not all) are:
1. Id
2. Title
3. Class
4. Style

The Id Attribute
• The id attribute of an HTML tag can be used to uniquely identify any
element within an HTML page.
• There are two primary reasons that you might want to use an id attribute
on an element:
• If an element carries an id attribute as a unique identifier, it is possible to identify just
that element and its content.
• If you have two elements of the same name within a Web page (or style sheet), you
can use the id attribute to distinguish between elements that have the same name.

The title Attribute
• The title attribute gives a suggested title for the element.
• They syntax for the title attribute is similar as explained for id attribute.
• The behavior of this attribute will depend upon the element that carries
it.
• Although it is often displayed as a tooltip when cursor comes over the
element or while the element is loading.

The class Attribute
• The class attribute is used to associate an element with a style sheet,
and specifies the class of element.

The style
Attribute
• The style attribute allows you to specify Cascading Style Sheet (CSS)
rules within the element.

Assignment
• Question 1:-
What are different Internationalization Attributes? Explain each one of
these with an example.

Generic Attributes

HTML - Formatting
• Bold Text
• Italic Text
• Underlined Text
• Strike Text
• Monospaced Font
• Superscript Text
• Subscript Text
• Inserted Text
• Deleted Text
• Larger Text
• Smaller Text

Grouping Content
• The <div> and <span> elements allow you to group together several
elements to create sections or subsections of a page.

Assignment
• Emphasized Text
• Marked Text
• Strong Text
• Text Abbreviation
• Acronym Element
• Text Direction
• Special Terms
• Quoting Text
• Short Quotations
• Text Citations
• Computer Code
• Keyboard Text
• Programming Variables
• Program Output
• Address Text
Class Activity

END OF LECTURE HTML BASICS


Developers Fundamentals: - Location of The Server. - How Many Trips? - Size of Files

Uploaded by

Copyright:

Available Formats

You might also like

Developers Fundamentals: - Location of The Server. - How Many Trips? - Size of Files

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Developers Fundamentals: - Location of The Server. - How Many Trips? - Size of Files

Uploaded by

Copyright:

Available Formats

Developers Fundamentals

• Location of the server.

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

Farrukh Ehsan - YouTube.com/c/iSaani -

You might also like