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
published in one-of-a-kind formats due
Front-end
to the fact it’s far a massive and
- Converting data to a graphical
interface. complicated system, it isn’t always but
Back-e nd 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
styled with CSS or controlled with
JavaScript.
6. BOLD <b> </b> - is used to specify
the bold text without any extra
importance.
7. HEADING <h1> to </h1> - is used to
define the headings of a page. With h1
being the highest level and h6 being
the least.
8. ITALIC <i> </i> - generally used to
display a technical term, phrase, the
important word in a different
language.
9. LIST <li> </li> - is used to define
the list item in an HTML document. It
is used within an Ordered List <ol> or
Unordered List <ul>.
10. IMAGE <img src= “…”> - Embeds
images into the web page.
NOTE: DOCTYPE Declaration (`<!DOCTYPE
HTML>`): It specifies the HTML version; typically
indicates HTML5.
BSIT-3 | Jessieca S. Sarmiento