Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
187 views

Web Development Programming Lesson 1

Uploaded by

bickosteve734
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
187 views

Web Development Programming Lesson 1

Uploaded by

bickosteve734
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

SPC 2205 INTERNET APPLICATION PROGRAMMING

Learning Group: BSc Software engineering

Lecturer: Theuri Patrick


Lesson 1 learning topics
• Web development introduction/history of HTML
• HTML Basics
• Elements and Attributes types

Lesson 1 Objectives
i. To understand the principles of creating an effect web page
ii. To Learn language of the web HTML & CSS
iii. Use specified markup language to develop a web page containing basic
HTML tags.

What Is Web Development?


➢ Web development refers to building website and deploying on the web.
Web development requires use of scripting languages both at the server
end as well as at client end.
➢ Every web developer must have a basic understanding of HTML, CSS, and
JavaScript.

Web development can be broken down into three layers:


i. client-side coding (front-end), front end deals with the system interface

ii. server-side coding (backend), usually behind the scenes dealing with the

servers, database and other applications


that deliver information to the user.

iii. Full stack development - includes both front-end and back-end


programming. therefore, it represents the complete web development
package.

1|Page
Differences between client side scripting and server side scripting

Client Side Scripting Server Side Scripting

Source code is visible to user. Source code is not visible to user because it’s output
of server side is a HTML page.

It usually depends on browser and it’s In this any server side technology can be use and it does not
version. depend on client.

It runs on user’s computer. It runs on web server.

There are many advantages link with this The primary advantage is its ability to highly customize,
like faster.
response times, a more interactive response requirements, access rights based on user.
application.

It does not provide security for data. It provides more security for data.

It is a technique use in web development It is a technique that uses scripts on web server to produce
in which scripts runs on clients browser.
a response that is customized for each client’s request.

HTML, CSS and JavaScript are used. PHP, Python, Java, Ruby are used.

The difference between web development and web design?

web designer web development

Web design is an extremely broad field, and web developer’s job to take this design and develop
will often be broken down into more specific
it into a live, fully functional website.
roles such as User Experience Design, User
Interface Design and Information web developer is the builder or engineer.
Architecture. a web designer is the architect

2|Page
A Brief History of the World Wide Web

➢ Throughout the 1980s and early 90s the Internet was used primarily by
large corporations and universities for e-mail and document transfer.
➢ However, it wasn't until the development of Web browsers and a language
called HTML that things really took off.
➢ HTML (Hyper Text Markup Language) was developed by Tim Berners-Lee
while he worked as a researcher in Switzerland. The original intent of
HTML was to provide a quick and easy way to facilitate information
transfer among scientists.
➢ The basic idea behind HTML is the insertion of tags (for example <body>)
within plain ASCII text and the interpretation of those tags by a software
program called a browser. (software application for accessing information
on the world wide web)

How Does the Web Work?


• The basic principle behind the Web is simple. Programs known as Web browsers
(such as chrome, Mozilla Firefox and Microsoft Internet Explorer) located on one
computer request Web pages from Web servers.

Web browsers not only let


you view Web pages but also
have built-in support for
Email, connecting to Usenet
discussion groups, and
downloading load files via ftp
(file transfer protocol). The
▪ secret to all of this is the URL
3|Page
Web Servers: - Web servers are software applications running on Web sites that
handle requests from Web browsers

Web server software returns Web pages (including pictures, audio and possibly video),
encoded in HTML, back to their Web browser clients.

The Uniform Resource Locator (URL) –is the web address Computers on the
Internet use the URL to make a connection between a Web browser and the target Web
server.
URL contains
• Protocol -rules that govern how computers communicate to each other) i.e. http
• Host or domain: www.html.com
• Path of the resource: full –form – http://www.html.com
Sections for Http url

http:// or https://
The "http" stands for Hypertext Transfer Protocol. It lets the browser to know
which protocol it is going to use to access the information specified in the domain. An
"https" protocol is short for "Hypertext Transfer Protocol Secure" and indicates that
information transmitted over HTTP is encrypted and secure. After the http or https is
the colon ( : ) and two forward slashes ( // ) that separate the protocol from the
remainder of the URL.

www.
www stands for world wide web and is used to distinguish the content. This portion of
URL is not required and many times can be left out. For example, typing
"http://computerhope.com" would still get you to the computer hope website. This
portion of the address can also be substituted for an important subpage known as a
subdomain

4|Page
computerhope.com

"computerhope.com" is the domain name for the website. The last portion of the domain
is known as the domain suffix, or TLD. It is used to identify the type or location of the
website. For example, ".com" is short for commercial, ".ac" for academic other
extensions

/jargon/u/
Next, "jargon" and "u" are the directories where the web page is on the server. In this
example, the web page is two directories deep. To find the file on the server, it would be
in the /public_html/jargon/u directory. With most servers, the public_html directory is
the default directory containing the HTML files.

url.htm
Finally, url.htm is the actual web page on the domain you're viewing. The trailing .htm is
the file extension of the web page that indicates the file is an HTML file. Other common
file extensions on the Internet include .html, .php, .asp, .cgi, .xml, .jpg, and .gif. Each of
these file extensions performs a different function, like all the different types of files on
your computer.

TOOLS FOR CREATING HTML DOCUMENTS

HTML tool editors - converts text and layout interface input into actual
HTML code

• There are so many software packages available to develop HTML. The software
packages can be grouped into two main categories:

5|Page
i. text-based (or code-based) editors i.e. (notepad)

ii. WYSIWYG (what you see is what you get) editors i.e. (dream weaver)

List of web Editors

1. Atom · 2. Visual Studio Code · 3. Brackets · 4. Sublime Text 5. Light Table


6. Notepad/notepad++ etc.

Use any text editor provided you are conversant with it

Class work notepad /sublime text

Introduction to HTML and Types of Tags

HTML- is a language to format web pages

- the main markup language for describing the structure of web pages

HTML as described earlier is a markup language not a programming language, like


Java, Ruby, PHP, etc. You need a web browser to view the HTML pages. The web
browsers do not display the HTML tags, but uses the tags to interpret the content of the
web pages.

HTML stands for Hypertext Markup language

Hyper – (link) allows us to navigate between pages or within same page.


www.html.com

Text – the actual information/ content to be displayed on the web page

Markup Language - a tag based language used to format web pages understood by
browsers like chrome, Firefox, safari, opera etc.

HTML is built by following or by referring SGML’S standard set of specifications, hence


we say HTML is evolved from SGML. (standard Generalized markup language)

SGML is a standard set of specifications followed for specifying or building any markup
language.

6|Page
➢ Website: is a collection of inter-linked related webpages.
➢ Webpage: is a well formatted document used to share information over the
internet.
➢ Browser: is a software for interpreting and displaying HTML files (Firefox,
chrome, opera, safari)

Some other popular markup languages are DHTML (Dynamic mark-up


language), XHTML (Extended Html), XML (Extensible Mark-up language)

Html Versions

7|Page
HTML5 provides a faster and more robust approach to web development.

Advantages of HTML Disadvantages Of HTML


Html is easy to learn and It cannot be used to develop a
understand dynamic website
Html is supported by all browsers There is no complete acceptable
standard of HTML
Html is easy simple to edit There are many incompatibilities of
HTML
Display changes instantly It is complex to design attractive
web page only using HTML .
Html can integrate with other Html has no programing
browsers easily capabilities

Html Tags

HTML tag is a command that provides the directions for visual content that one sees
on the web.
Html is bound by angular brackets (<>) that always opens with a < (less than) sign and
closes with a > (greater than) sign. It controls the appearance, layout and flow of
the web page.
A tag contains three parts: element (identification of tag), attribute and value.
HTML tags can be of two types:
i. Paired Tags
ii. Singular Tags
1. Paired Tags
It is also called container tag. Have their companion tags opening/starting and
closing/ending tags.
Tag Examples
• html> … </html> — The root element. ...
• <head> … </head> — The document head. ...
• <title> … </title> — The page title. ...
• <body> … </body> — The page's content. ...
• <h1> … </h1> — A section heading. ...

8|Page
• <p> … </p> — A paragraph. ...
• <a> … </a> — A link. ...
• <img> — An image. The img element lets you insert images into your web pages

2. Unpaired tags singular, void tags or standalone tags.


Examples
<br/> insert a link break.
<hr/> defines a horizontal rule.

Basic structure of html document


Step 1: Open Notepad (Windows)

Step 2: Write code in HTML

Step 3: Save the HTML file with .htm or .html extension.

Step 4: Open the HTML page in your web browser. i.e. chrome, fire fox
Mozilla

Output

9|Page
Building blocks of HTML

➢ Tags: An HTML tag surrounds the content and apply meaning to it. It is written
between < and > brackets.

➢ Attribute: 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

i. Name - The name is the property you want to set


ii. Value - The value is what you want the value of the property to be set and
always put within quotations

Example of HTML attribute

Name: example <p align


Value: example = “left ”

Core types of Attributes The four core attributes that can be used on the majority of
HTML elements (although not all) are:

• Id

• Title

• Class

• Style

10 | P a g e
The style Attribute
The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the
element.

11 | P a g e

You might also like