ADVANCED COMPUTER APPLICATION (WEB TECHNOLOGY)
FUNDAMENTALS OF WEB DEVELOPMENT Has Web Development Skills: HTML, CSS,
HTML, CSS, JavaScript JavaScript, [Link], [Link]
A Left-brained (Logical) Person
The Internet and the World Wide Web are not the
same things. The internet provides access to the FRONT END AND BACK END
World Wide Web.
Front End Web Developer
A website is made up of web pages. A home page Defined components on the page with HTML
(index) is generally the first page a user sees when Make them look pleasing with CSS
vising a site. Enable interactivity with JavaScript
Enhance productivity with use of frameworks
Web site – A group of related files organized around
a common topic. Back End Web Developer
Create the page components and content
Web page – A single file within web site that has a dynamically on the webserver
unique name. Send the HTML + CSS + JavaScript to web browser
(used by a human user)
Home Page – The main page on a Web site which Generate pages by programming in Java,
contains general information about the site. JavaScript, PHP, Perl, Python, Ruby
Aim to achieve fast response times to end users
WEB DEVELOPMENT _________________________________________
The process of creating websites or web
applications that can be accessed over the internet BASIC HTML: HTML, CSS, and JavaScript
or an intranet. It involves a combination of skills and
disciplines, including web design, programming, HTML (Hyper Text Markup Language)
server management, content creation, and website It is the most basic building block of the Website. It
maintenance. The main goal of web development is is represented by tags. It defines the meaning and
to create a website that is functional, user-friendly, structure of web content.
and visually appealing, as well as to ensure that it is
optimized for performance and accessibility. HTML is not a programming language!
Browsers do not display HTML Tags, but use them
Importance of Web Development to render content of the page.
• Accessible through mobile and desktop
• Customers/users need to find you/your JavaScript
business It is used to develop interactive web applications. It
• Builds trust in your organization and can power featured like interactive images,
improves your reputation carousels, and forms.
• Your website is your first round-the-clock
salesperson! CSS (Cascading Style Sheet)
It is a style language that define layout of HTML
“Websites promote you 24/7: No employee will do Documents. It use for presentation and styling
that.”
— PAUL COOKSON HYPERTEXT ORIGINS
HyperText, Text with references (hyperlink) to other
WEB DESIGNER VS WEB DEVELOPER text. “Hyper” meaning Greek Origin: “Over”, “Beyond”
First Idea: Vannevar Bush, USA, in 1945
WEB DESIGNER
Designs the look and feel of a website PARTS OF AN HTML FILE
(creative side of website) <!DOCTYPE html>
Decides the layout, fonts, color, images It is needed at the top of every file to tell the browser
and overall branding what language is written in & Tell the browser what
Creates the visual mock-up of the website language to read…
Rarely does the development of a website!
A Right-brained (Creative)Person <tag>content goes here…</tag>
HTML Tags normally come in pairs like <p> and
WEB DEVELOPER </p>. The first tag in a pair is the start tag, the
Brings the website mock-up to life on the second tag is the end tag. The end tag is written like
Internet (development side of website) the start tag, but with the a forward slash inserted
Develops the website and hosts on a before the tag name.
webserver
ADVANCED COMPUTER APPLICATION (WEB TECHNOLOGY)
<HTML></HTML> ADDING IMAGES
At the beginning and the end of the file to mark the To add an image in HTML, use the <img>
beginning and of the code. Tell the browser to start tag followed by the source attribute to specify the
the reading code… location of the image file on your computer. For
example:
<HEAD></HEAD>
Marks the header of a file, Contains more details <img src="[Link]" alt="description of image">
about how the browser should read the file, Identify
the header part of the document… The alt attribute is used to provide an alternative
description of the image, which is helpful for visually
<BODY></BODY> impaired users or if the image fails to load.
Marks the body of a file, This is the main part of the
file, Identify the body of the document… ADDING LINKS
To add a link in HTML, use the <a> tag
BASIC HTML followed by the href attribute to specify the URL of
the page you want to link to. For example:
<a href="[Link] Text</a>
You can also add a title attribute to provide a tooltip
when the user hovers over the link.
Adding Lists:
To create an ordered To create an unordered
list, use the <ol> tag and list, use the <ul> tag and
add each list item with add each list item with
the <li> tag. For the <li> tag. For
example: example:
<ol> <ul>
<li>List item 1</li> <li>List item 1</li>
COMMON HTML TAGS <li>List item 2</li> <li>List item 2</li>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> - <li>List item 3</li> <li>List item 3</li>
Heading tags that specify the importance </ol> </ul>
of the text within them.
<p> - Defines a paragraph of text. THE <INPUT> ELEMENT
<a> - Defines a hyperlink.
<img> - Defines an image.
<ul> - Defines an unordered list.
<ol> - Defines an ordered list.
<li> - Defines a list item.
<table> - Defines a table.
<tr> - Defines a table row.
<td> - Defines a table cell.
WHAT IS CSS?
CSS stands for Cascading Style Sheets,
CSS describes how HTML elements are to be
displayed on screen, paper, or in other media and
CSS saves a lot of work. It can control the layout of
multiple web pages all at once
TYPES OF CSS
Inline CSS: This is CSS code that is added
directly to an HTML tag using the "style" attribute.
Inline CSS affects only the specific element that it is
applied to.
ADVANCED COMPUTER APPLICATION (WEB TECHNOLOGY)
<p style="color: red; font-size: 18px;"> This text is <!DOCTYPE html>
styled with inline CSS.</p> <html>
<head>
ADVANTAGES <title>External CSS Example</title>
Quick and easy to implement. <link rel="stylesheet" type="text/css"
Can be useful for making small style changes to href="[Link]">
specific elements. </head>
<body>
DISADVANTAGES <h1>External CSS Example</h1>
Not ideal for larger changes or multiple elements. <p class=“all” >This paragraph is styled.</p>
Can be difficult to maintain and update over time. <p class=“all” >This paragraph is styled with
Can result in messy HTML code that is hard to read external CSS.</p>
and edit. <p id=“me”>Another paragraph here.</p>
</body>
Internal CSS: This is CSS code that is </html>
placed within the "head" section of an HTML
document using the "style" element. Internal CSS ADVANTAGES
affects all elements on the page that match the Can be used to apply the same styles across
specified selectors. multiple pages on a website.
Keeps the style information separate from the HTML
code.
Easiest to maintain and update over time.
DISADVANTAGES
Requires a separate file and link in the HTML code.
Can result in slower page load times if the file is
large or takes a long time to download.
Can be more difficult for beginners to learn and
implement.
ADVANTAGES
Can be used to make larger changes across
multiple elements on a page.
Keeps the style information separate from the HTML
code.
Easier to maintain than inline CSS.
DISADVANTAGES
Can still result in messy code if not organized
properly.
Only affects the specific HTML document that it is
included in.
External CSS: This is CSS code that is
stored in a separate file with a .css extension and
linked to an HTML document using the "link"
element. External CSS affects all elements on the
page that match the specified selectors.