Web represents world wide web i.e. website.
Technology represents how to use techniques and tools.
Web Technology is a technique to interconnect webpages in website through internet.
Web Technology use HTML, CSS, JS, PHP, Python, MySQL.
Web Development Life Cycle is a systematic process of creating and maintaining website.
Stage of WDLC
1. Gathering information
2. Planning
3. Design and layout
4. Content creation
5. Development
6. Testing
7. Maintenance and updating
DNS (Domain Name System) is a unique and suitable website name translates to IP address.
Types of DNS: .com, .edu, .gov, .org, .np
DNS registration process
Registrars: nestnepal.com prabhuhost.com gurkhahost.com
- Choose domain name
- Check availability
- Choose domain registrar
- Buy and register
- Renew before expiry.
4.2 Concept of UI/UX
UI/UX is front-end design of website which users interface screen layout and creative positive engaging user experience.
Back-end of software application or website is responsible for handling operation.
UI/UX design use figma, Adobe CD.
Wireframe is an outline of UI, showing the basic structure and layout of webpage or application.
Wireframe design is the process of creating a representation of a UI of webpages
4.3 HTML is used to build website. Hypertext links to other texts and markup process to link.
HTML tags predefined structure and formatting.
Structure of HTML
<!DOCTYPE html> <html><head>...</head><body> ...</body></html>
Formatting of HTML Tag
1. Not case sensitive
2. Container or paired tag:
<p>...</p>
3. Empty or unpaired tag:
<br>, <img>
4. <tagname attribute = "value" > Content </tagname>
<Font size="12">Hi</Font>
Empty Tag: <tagname attribute="value" />
5. <!--comments-->
6. <br> break line
7. <P> create paragraph
8. Aligen:"left/center/right"
9. <H1-6> </H1-6>big-small
10. <HR> Horizontal Rule
11. <B,I,U,sup,sub>.. </B/I/U/sup/sub> Text styles
12.Anchor for hyperlinks
<a href= "url" target = "blank"> link text </a>
13. Un/ordered List(./123):
<u/ol> <li>...</li>
<li>...</li> </u/ol>
14. <table>(<tr>(<td>...)</tr>)</table>
15.<img src="url" alt="text" width="W" height="H" />
16.<form action="URL" method="POST/GET">... </form>
17. <div>...</div>
4.4 CSS specify style of HTML.
Embed CSS in HTML
Inline CSS
<html>
<head><title>Inline </title> </head>
<body>
<h1 style="colour:blue; font-size:24px;"> Heading</h1>
</body>
</html>
Internal CSS
<html><head><title>Internal</title>
<style> body {font-family:Arial,sans-serif; background-color:#f0f0f0;}
h1{colour:purple; text-aligen:center;}
p{line-height:1:6;}
</style></head>
<body>
<h1> Heading Styled</h1> <p> Paragraph also styled.</p> </body></html>
External CSS styles.css
body{font-family:verdana; background-color:#e6e6f5;} H1{colour:darkgreen; font-size:36px;} p{margin-left:20px;}
<html><head><title> External CSS</title>
<link rel="stylesheet" href="styles.css"> </head>
<body> <H1>Heading</H1>
<p> Paragraph.</p>
</body></html>
Practical Task
a) Develop simple webpage using notepad or similar tools including the features of
html tags (basic and text formatting tags), lists, picture embedding, table and
hyperlink.
b) Demonstrate the use of inline and internal CSS (include it in basic text formatting
tags)
Project Work
a) Develop your personal web page using suitable tools (e.g. Dreamweaver, Chrome
DevTools or similar) , including <list>, <A>, <img>, <table>, <form>, <div>
html tags, and internal and inline CSS.
Activities
• Visualise the web development life cycle.
• Demonstrate the UI/UX wireframe concept.
• Encourage the students to sketch UI/UX with manual or online tools.
• Develop and present webpages using HTML tags.
• Develop and present webpages using CSS.
• Document the HTML tags and CSS script for internal and practical
evaluation.