CHAPTER 1: INTRODUCTION
TO WEB DEVELOPMENT
IT 11/L-WEB SYSTEMS AND TECHNOLOGY 1
BSIT-3
WEB DEVELOPMENT SGML (Standardized Generalized Markup
Language)
• Building and maintenance of web sites. - is a standard generalized markup
• Work happens behind the scenes to
language that makes use of a superset
make a website look great. of extensively used markup languages
WHY? like HTML and XML.
- Website is a unique way to connect
- it is used extensively to manipulate
with the world.
massive files which are a concern with
HOW?
common revisions and want to be
- Back-end and front-end
Front-end published in one-of-a-kind formats due
- Converting data to a graphical to the fact it’s far a massive and
interface. complicated system, it isn’t always but
Back-end extensively used on private computers.
- Consist of a server, an META LANGUAGE
application, and a database. - is a language used to describe, define,
- Builds and maintains. or analyze another language, often
referred to as the object language. It
LAYERS OF WEB DEVELOPMENT essentially allows for discussing the
grammar, structure, and rules of the
1. HTML – Structure object language.
2. CSS – Style Meta data – data about data.
3. JS – Behavior
HISTORY
HTML (Hypertext Markup TIM BERNERS-LEE
Language) - pioneer of the use of hypertext or
- Is a mark-up language creation of web sharing information.
pages with hypertext and markup - Created the first browser
language. WorldWideWeb in 1990 and
Hypertext introduce it to colleagues in CERN in
- branch to perform a text. March 1991.
- defines the links between the web MARKUP ELEMENTS TYPE
pages. 1. STRUCTURAL – describes the
Markup language purpose of the text.
- combine as text and extra information 2. PRESENTATIONAL – describes the
about the text. appearance of the text.
Web page/webpage 3. HYPERTEXT – links the parts of the
- is the resource in world wide documents to other documents.
web(www). BASIC STRUCTURE
URL (Uniform Resource Locator) 1. HTML <html> </html> - the root
- is a character string (address) which element that encompasses the entire
is used to access data from the HTML document structure. It serves
internet. as the parent to both the <head> and
- it is the resource address on the <body> tags.
internet. 2. HEAD <head> </head> - this
contains the information about the
BSIT-3 | Jessieca S. Sarmiento
HTML document including the Title of NOTE: <!– comment –>:is used to add comments
the page. in the HTML codes.
3. TITLE <title> </title> - name of
website or content to display. CSS (Cascading Style Sheet)
4. BODY <body> </body> - This - rules defining how html “presented”.
contains everything you want to - It defines the presentation of HTML
display on the Web Page. elements on a web page, enabling
changes to fonts, colors, sizes,
BASIC TAGS spacing, column layouts, and
HTML TAGS give structure and meaning to animations.
your content. Can’t change: content and markup
1. HEADING <head> </head> - is
used to define the head part of the JAVASCRIPT
document which contains the JAVASCRIPT ≠ JAVA
information related to the webpage. - Javascript was not developed at Sun
2. PARAGRAPHS <p> </p> - defines Microsystems, the home of Java.
the paragraph and is used to give JAVASCRIPT
structure to text content within a - a client-side language used to add
webpage. interactivity to web pages.
3. LINE BREAK <br> - used to end - It is also known as the scripting
the line, but don’t want to break the language for webpages. It is well-
line. known for the development of web
4. ANCHOR TAG <a href=”…”>…</a> pages, and many non-browser
- defines a hyperlink, which is used to environments also use it.
link from one page to another. - Was developed at Netscape in 1995.
5. DIVISION TAG <div> </div> - It was originally called “Livescript”.
- defines sections in HTML
documents, serving as containers
TWO TYPES OF TAGS
TAGS are the basic units or building blocks
styled with CSS or controlled with
that controls how the HTML does its
JavaScript. structuring.
6. BOLD <b> </b> - is used to specify
the bold text without any extra 1. CONTAINER TAG- These tags enclose
importance. content and come in pairs, with an
7. HEADING <h1> to </h1> - is used to opening tag and a closing tag. The
define the headings of a page. With h1 content is placed between these tags.
being the highest level and h6 being 2. EMPTY TAG- Also known as self-
closing tags, these tags do not enclose
the least.
any content and do not have a closing
8. ITALIC <i> </i> - generally used to
tag. They are used alone.
display a technical term, phrase, the
important word in a different ATTRIBUTES: An additional information you
language. may add inside your tag and customize
9. LIST <li> </li> - is used to define element’s appearance that may be seen on the
the list item in an HTML document. It front-end of your web.
is used within an Ordered List <ol> or
Unordered List <ul>. SYMMETRICAL DESIGN
10. IMAGE <img src= “…”> - Embeds - In basic web principles, this concept is
images into the web page. traditional, conservative, professional
yet simple mood or atmosphere.
NOTE: DOCTYPE Declaration (`<!DOCTYPE
HTML>`): It specifies the HTML version; typically
indicates HTML5.
BSIT-3 | Jessieca S. Sarmiento
CHAPTER 1: INTRODUCTION
TO WEB DEVELOPMENT
IT 11/L-WEB SYSTEMS AND TECHNOLOGY 1
BSIT-3
FEATURES OF WEB BROWSER ESSENTIAL ELEMENTS OF WEB
CONTENTS
1. Home Page: Whenever we open a
browser, the first web page which 1. ACCURACY- refers to the degree to
loads is called the home page. which the information presented is
Although the home page of a browser correct, credible, and current.
has some default setting, it can be 2. READABILITY- refers to how easily a
changed according to user’s reader can understand and engage
preference. with the text on a web page.
2. Address (URL) Bar: Through this bar 3. ETHICAL AND LEGAL-
user can access different websites or ethical and legal considerations are
search anything on browser. crucial for ensuring that the content
3. Navigation Buttons: Using the is responsible, trustworthy, and
forward and backward buttons user compliant with regulations
can revisit previously opened web
pages. These buttons provide
convenience to retrieve data HOW PEOPLE ACCESS THE WEB?
previously accessed. People access websites using software called
a web browser. Popular examples include
4. History: If you visited a website and
Firefox, Internet Explorer, Safari, Chrome,
want to revisit it after a few days but
have forgotten the address of website and Opera.
then don’t worry as every browser has
a history where it collects all DARPA (DEFENSE ADVANCED
previously visited data. RESEARCH PROJECTS AGENCY)
5. Bookmark: This feature helps in - Established in 1958
quickly accessing websites. If you - is a research and development agency
come across some important web page of the United States Department of
you can always bookmark it for easy Defense.
access in future. - DARPA’s mission is to develop
6. Refresh Button: The refresh button breakthrough technologies and
reloads the page and shows updates if capabilities for national security.
any.
7. Home Button: It brings the user to
home page which can be set by user.
8. Tabbed Browsing: Using this feature
a user can open multiple web pages in
the same web browser so that they
can easily switch between them.
9. Extensions: Extensions or plugins (like
AdBlock) can be installed by the user.
These extensions help in improving
functionality of web browsers.
BSIT-3 | Jessieca S. Sarmiento