Scribd
Upload
8 views

Unit 7. Webpage Development

Uploaded by

Kusum Paudel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

Unit 7. Webpage Development

Uploaded by

Kusum Paudel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 45

Webpage Development

Basics of HTML and CSS(Static Webpage Development)


Basic Features of Photoshop
Multimedia and its tools
Webpage Development
• Webpage development involves creating and designing web pages that are
accessible through the internet. It's a process that includes several key
components:
• HTML (HyperText Markup Language): HTML is the foundational
language for creating the structure and content of a webpage. It uses tags to
define various elements such as headings, paragraphs, lists, images, links,
forms, and more. HTML provides the basic structure that browsers use to
render a webpage.
• CSS (Cascading Style Sheets): CSS is used to enhance the visual
presentation of HTML elements. It allows you to control the layout, colors,
fonts, and overall styling of a webpage. By separating the structure (HTML)
from the presentation (CSS), you can achieve a more organized and
maintainable codebase.
Webpage development
• Back-End Development: In addition to the front-end (client-side) technologies
mentioned above, web development involves back-end (server-side) technologies.
This includes server-side scripting languages like PHP, Python, Ruby, or Node.js,
which handle server-side logic, database interactions, and other backend operations.
• Web Servers and Hosting: Once a webpage is developed, it needs to be hosted on a
web server to be accessible on the internet. Popular web servers include Apache and
Nginx. Hosting services like AWS, Heroku, or traditional web hosting providers are
used to deploy and make websites publicly accessible.
• Database Management: Many dynamic websites require databases to store and
retrieve data. Common database systems include MySQL, PostgreSQL, MongoDB,
and SQLite. They are used to manage user data, content, and other information.
• Version Control: Developers often use version control systems like Git to track
changes in their code, collaborate with others, and manage different versions of their
projects.
Basics of HTML
• HTML stands for HyperText Markup Language, is the standard
language used to create and design web pages.
• It provides a way to structure content on the web by using a set of
elements, which are represented by tags.
• HTML tags describe different elements on a webpage such as
headings, paragraphs, links, images, and more.
Simple example of an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>

<h1>Hello, Students! </h1>


<p>This is a paragraph of text on my web page.</p>
<a href="https://www.example.com">Visit Example.com</a>

</body>
</html>
Example Description
In this example:
• <!DOCTYPE html> declares the document type and version of HTML
being used.
• <html> is the root element of the HTML document.
• <head> contains meta-information about the document, such as the title.
• <title> sets the title of the webpage (what appears in the browser tab).
• <body> contains the actual content of the webpage, including text,
images, links, and other HTML elements.
• <h1> and <p> are heading and paragraph tags, respectively.
• <a> is an anchor tag used to create hyperlinks.
Some Important Elements of HTML
1. Headings (<h1> to <h6>):
• Headings define the structure and hierarchy of your content. <h1> is
the highest level, and <h6> is the lowest.
2. Paragraph (<p>):
• The <p> element is used for paragraphs of text.
• Eg: <p>This is a paragraph of text.</p>
3. Links (<a>):
The <a> (anchor) element creates hyperlinks.
Eg: <a href="https://www.example.com">Visit Example.com</a>
4. Images (<img>):
The <img> element embeds images into your webpage.
Eg: <img src="image.jpg" alt="Description">
5. Lists (<ul>, <ol>, <li>):
• <ul> creates an unordered list, <ol> creates an ordered list, and <li> defines list items.
• Eg:
6. Tables(<table>, <tr>, <th>, <td>):
7. Forms (<form>, <input>,<textarea>,
• Tables are used to display data in rows and <button>):
columns.
<table> •Forms collect user input.
<tr>
<form>
<th>S.N.</th>
<th>Name</th> <label for="Username"> Username:</label>
<th>Address</th> <input type="text" id="Username" name="Username">
</tr>
<tr> <label for="Password"> Password:</label>
<td>1</td> <input type="password" id="Username" name="Username">
<td>Kusum Paudel</td> <button type="Submit" >Submit</button>
<td>Gulariya, bardiya</td>
</tr> </form>
<tr>
<td>2</td>
<td>Rajan Bhandari</td>
<td>Balkot, Bhaktapur</td>
</tr>
</table>
A example HTML
<!Doctype html> <img src="imagename.jpg" alt="Image" </tr>
<html> <tr>
<head> <p> <td>2</td>
<title> Kusum paudel tab</title> <ol> <td>Rajan Bhandari</td>
</head> <li>Get up at 6 AM.</li> <td>Balkot, Bhaktapur</td>
<body> <li> Eat brakfast.</li> </tr>
<h1>This is Heading 1.</h1> <li>Study</li> </table>
<h2>This is Heading 2.</h2> <li>Go to college</li>
<h3>This is Heading 3.</h3> </ol> <form>
<h4>This is Heading 4.</h4> </p> <label for="Username"> Username:</label>
<h4>This is Heading 5.</h4> <input type="text" placeholder="Enter Username"
<h6>This is Heading 6.</h6> <table> id="Username" name="Username"> <br>
<h7>This is Heading 7.</h7> <tr> <label for="Password"> Password:</label>
<p>This is a paragraph section. We can write a lot <th>S.N.</th> <input type="password" placeholder="Enter
of contents here. You can explain your details here. password "id="Username" name="Username">
<th>Name</th> <br>
We are going to built a webpage. This webpage will
contaions my details, my profile, my cv, my job <th>Address</th> <button type="Submit" >Submit</button>
descriptions.</p> </tr> </form>
<p> <tr>
<a href="https://www.youtube.com/watch?v=- <td>1</td> </body>
G7bJVAIiEI&t=393s"> "My Youtube" </a>
<td>Kusum Paudel</td>
</p>
<td>Gulariya, bardiya</td> </html>
CSS (Cascading Style Sheets)
CSS (Cascading Style Sheets)
• CSS, or Cascading Style Sheets, is used to style and format the visual
presentation of HTML elements on a webpage.
• It is used to stylize elements written in a markup language such as
HTML. It separates the content from the visual representation of the site.
• CSS comes into play to make that person look stylish and appealing. It
adds color, changes fonts, and arranges the elements in a visually
pleasing way. So, while HTML is the basic structure, CSS is what makes
your website look good and attractive.
• Think of it this way: HTML is the foundation, and CSS is the paint and
decoration that make your website beautiful and user-friendly. They
work together to create a well-designed and visually appealing website.
1. Selectors
• Selectors are used to target HTML elements for
styling.
• Element Selector: This selects all <p>
(paragraph) elements and sets their text color to
blue.
• Class Selector: This selects all elements with
the class "highlight" and sets their background
color to yellow.
• ID Selector: This selects the element with the
ID "header" and sets its font size to 24 pixels.
2. Properties and Values
• Color:

• Background Color:

• Font Size:
Note: Margin: Space Outside Border, Padding: Space inside Border
For External CSS
• Make a .css file separately and use the following link to attach
that .css file to .html file.
• For that; open html file.
• In the <head> section, <link rel= “stylesheet” href=“location of
the .css file”>
Overall CSS
<style> width: 200px;
p{ text-align:justify;
Color: red; }
background-color: orange; h2{color:blue; }
font-size: 20px; body{background-color:#4CA;}
border: 2px solid black; p{text-decoration:none;}
margin:10px; </style>
padding:10px;
font-family: hubballi;
HTML VS CSS
Basic Features of Photoshop
• Photoshop is a powerful graphics editing software developed by Adobe.
• It is widely used for various purposes, including photo editing, graphic design, and.
digital art creation
• Here are some key features and functionalities of Photoshop:
• Image Editing: Photoshop allows you to edit and manipulate images with a wide range
of tools. You can adjust colors, brightness, contrast, and apply various filters to
enhance or modify photos.
• Layers: One of the defining features of Photoshop is its use of layers. Layers allow you
to work on different elements of an image separately, making it easier to control and
organize your edits.
• Selection Tools: Photoshop provides a variety of selection tools, such as the
Marquee(used for creating simple rectangular or elliptical selections), Lasso, and
Magic Wand, which allow you to isolate specific parts of an image for editing.
• Text Editing: You can add and customize text in your images using a variety of fonts,
sizes, and styles. Text can be manipulated just like any other layer.
• The Marquee tool is used for creating simple rectangular or elliptical
selections.
• The Lasso tool is designed for freehand selections, allowing you to
draw custom shapes around the area you want to select.
• The Magic Wand tool is used for selecting areas of similar color or
tone with a single click. It's handy for selecting large, contiguous
regions of an image with similar attributes.
Basic Features of Photoshop
• Drawing and Painting: Photoshop includes a set of brushes and drawing
tools that enable you to create digital illustrations and paintings. The
software supports pressure-sensitive tablets for more natural brush strokes.
• Filters and Effects: There are numerous filters and effects available in
Photoshop, allowing you to apply artistic effects, simulate different
textures, and add special effects to your images.
• Retouching and Healing: Photoshop provides tools like the Clone Stamp
and Healing Brush for retouching and removing imperfections in photos.
• 3D Editing: In addition to 2D image editing, Photoshop also supports 3D
editing, allowing you to create and manipulate 3D objects within the
software.
Some basic features of Photoshop
• User Interface: Photoshop has a user-friendly interface with menus, panels, and
toolbars that provide easy access to various features.
• Tools: Photoshop offers a wide range of tools for tasks such as selection, painting,
drawing, cropping, and retouching. Common tools include the Marquee tool,
Lasso tool, Brush tool, Eraser tool, and many more.
• Layers: The use of layers is a fundamental feature in Photoshop. Layers allow
you to work on different elements of an image independently, making it easier to
manage and edit specific parts without affecting the entire image.
• Image Adjustments: Photoshop provides numerous adjustments for color
correction and enhancement, including brightness, contrast, saturation, levels, and
curves.
• Filters: There are various filters and effects that can be applied to images to
achieve artistic or stylistic results. Filters can be used to blur, sharpen, distort, or
add texture to images.
• Text Tools: Photoshop allows you to add and format text within your images.
You can choose from a variety of fonts, styles, and sizes, and manipulate text like
any other graphical element.
• Selection Tools: Selection tools enable you to isolate specific areas of an image
for editing. This includes the Marquee, Lasso, Magic Wand, and Quick
Selection tools.
• Clone Stamp and Healing Brush: These tools are used for retouching and
removing imperfections in images. The Clone tamp tool duplicates one part of an
image to another, while the Healing Brush blends the sampled area for a more
seamless result.
• Zoom and Pan: Photoshop allows you to zoom in and out of images for detailed
work and pan across the canvas to navigate large documents easily.
• Undo and History: Photoshop provides the ability to undo actions and maintains
a history panel, allowing you to revisit previous states of your project.
Importances of Photoshop tool
• Image Editing and Enhancement:
• Photoshop is widely used for editing and enhancing images. It allows professionals and
hobbyists to adjust colors, brightness, contrast, and apply filters to improve the overall
quality of photographs. This is crucial for photographers, graphic designers, and artists.
• Graphic Design:
• Photoshop is a useful tool for graphic designers. It facilitates the creation of logos,
banners, posters, and other visual elements for branding and marketing purposes. The
use of layers, text tools, and various filters makes it a powerful platform for creative
design work.
• Digital Art Creation:
• Photoshop is extensively used for digital art creation. Artists can use a variety of
brushes, textures, and layers to create illustrations, paintings, and other digital artworks.
The software supports pressure-sensitive tablets, providing a natural drawing
experience.
• Photo Retouching and Restoration:
• Photoshop is essential for retouching and restoring old or damaged
photos. It allows users to remove blemishes, wrinkles, or unwanted
elements from images. Additionally, it provides tools like the Healing
Brush and Clone Stamp for repairing damaged or faded photographs.
• Web Design and UI/UX Design:
• Photoshop plays a crucial role in web design and user interface/user
experience (UI/UX) design. Designers use it to create mockups,
wireframes, and visual elements for websites and applications. The
ability to design and organize layers makes it easier to plan and
implement complex designs.
Applications of Photoshop
• Photography:
• Photoshop is extensively used in the field of photography for retouching,
color correction, and enhancement of images. Photographers use it to remove
blemishes, adjust exposure, and create visually appealing compositions.
• Graphic Design:
• Graphic designers use Photoshop to create logos, banners, posters, brochures,
and other visual elements. The software's layer-based editing allows
designers to work on complex compositions with ease.
• Digital Art and Illustration:
• Photoshop is a popular tool among digital artists and illustrators. Its
extensive brush library, layers, and blending modes allow artists to create
digital paintings, illustrations, and concept art.
• Web Design:
• Web designers use Photoshop to create website mockups, design user interfaces (UI), and develop
visual elements for websites and applications. Designers can create responsive layouts and design
prototypes for user experience testing.
• Video Game Design:
• Photoshop is used in the creation of graphics and textures for video games. Game designers and
artists use it to design characters, backgrounds, and other visual elements that contribute to the overall
aesthetics of the game.
• Print Media:
• Photoshop is widely used in the print industry for designing materials such as magazines, newspapers,
posters, and packaging. Print designers use it to ensure high-quality images and layouts for printing.
• Marketing and Advertising:
• Marketing professionals and advertisers use Photoshop to create visually appealing advertisements,
promotional materials, and social media graphics. The ability to manipulate images and add text
makes it a valuable tool for marketing campaigns.
Multimedia
• Multimedia is the use of a computer to present and combine text, graphics, audio, and
video with links and tools that let the user navigate, interact, and create; and
multimedia is used to represent information in an interesting and interactive manner.
• It combines text, audio, video, graphics, and animation. It uses media in an
interactive manner to provide information in multiple ways.
• Multimedia uses computers to present and combine text, graphics, audio, and video
with links and tools, allowing the user to navigate, interact, create, and communicate.
• It has 5 key elements:
• Text
• Audio
• Animation
• Graphics
• Videos
Elements/ Components of Multimedia
• Text: Written or displayed information, often used to convey context,
descriptions, or additional details.
• Graphics: Visual elements such as images, illustrations, charts, and
diagrams that enhance the presentation of information.
• Audio: Sound elements, including music, narration, voiceovers, or
sound effects, to provide an auditory dimension to the content.
• Video: Moving images and sequences that capture dynamic visual
information. Video can include live footage, animations, or a
combination of both.
• Animation: Animation is a technique or process of creating the illusion
of motion or change through a rapid sequence of still images or frames.
Applications of Multimedia
• Education:
• With the help of virtual classrooms, teachers and
students can have the opportunity to learn,
interact, and exchange innovative ideas without
even stepping outside and sitting inside a
classroom for hours.
• Also, there's something called edutainment,
which combines education and entertainment to
make learning more enjoyable.
• Communication:
• With the establishment of the internet and its
fast spread across the globe, traditional types
of communication have been removed.
• The feature of Online video calling has
become a new face for communication.
• Skype, Google Meet, and video calling
platforms allow video calls between friends
and can also be used for meetings between
different heads of various organisations.
• Business:
• Business conducted through the internet or
E-commerce has rapidly replaced
conventional ways of buying and selling
everyday things.
• You can simply scroll through online
shopping sites like Amazon, Flipkart, etc.,
and see how text, images, and videos have
been mixed into making an attractive user
interface.
• Entertainment:
• Multimedia elements are widely used in the entertainment industry.
Movies, Cartoons, advertisements, etc., are nowadays created using
special effects and animations.
• VFX has become a big part of action and thriller movies in today's
world.
Multimedia Examples
• Examples of multimedia learning include
• watching a PowerPoint presentation,
• watching a pre-recorded lecture,
• reading a physics textbook,
• video podcasts,
• audio slideshows and animated video,
• presentations,
• training, marketing,
• advertising, product demos,
• catalogues, networked communication and voicemail.
Multimedia tools
• Multimedia tools are software applications or hardware devices that
enable the creation, editing, playback, and manipulation of
multimedia content.
• These tools are designed to work with various types of media,
including text, graphics, audio, video, and interactive elements.
• Here are some common categories of multimedia tools:
• Graphics Editing Tools:
• Examples: Adobe Photoshop, GIMP, CorelDRAW
• Function: Used for creating and editing graphics, images, and illustrations.
• Video Editing Software:
• Examples: Adobe Premiere Pro, Final Cut Pro, iMovie
• Function: Enables editing and manipulation of video content, including
cutting, merging, adding effects, and more.
• Audio Editing Software:
• Examples: Audacity, Adobe Audition, GarageBand
• Function: Allows users to edit and enhance audio files, including recording,
cutting, mixing, and adding effects.
• Presentation Tools:
• Examples: Microsoft PowerPoint, Google Slides
• Function: Facilitates the creation of multimedia presentations, combining
text, images, and sometimes audio and video.
• 3D Modeling and Animation Software:
• Examples: Blender, Autodesk Maya, Cinema 4D
• Function: Used for creating 3D models, animations, and visual effects.
• Web Authoring Tools:
• Examples: Adobe Dreamweaver, WordPress, Wix
• Function: Assists in creating and designing multimedia-rich websites by
integrating text, images, videos, and interactive elements.
• Video Game Development Tools:
• Examples: Unity, Unreal Engine
• Function: Enables the creation of video games with multimedia
elements, including graphics, audio, and animations.
• Virtual Reality (VR) and Augmented Reality (AR) Tools:
• Examples: Unity (for VR), ARKit (for AR)
• Function: Facilitates the development of VR and AR experiences by
integrating multimedia elements into virtual or augmented
environments.
• Screen Recording and Capture Tools:
• Examples: Camtasia, OBS Studio, Snagit
• Function: Records and captures on-screen activities, useful for
creating tutorials, demonstrations, and presentations.
• Multimedia Players:
• Examples: VLC Media Player, Windows Media Player, QuickTime
• Function: Used for playing various multimedia files, including audio
and video.
Advantages of Multimedia
• Better Communication:
• Multimedia helps us share information in a more interesting way by using
pictures, sounds, and interactive features, making it easier to understand and
remember.
• Many Uses:
• Multimedia is like a toolbox with different tools – it can be used in many
ways for creating things like videos, animations, and interactive content,
making it flexible and fun.
• Great for Learning:
• In school, multimedia makes learning more enjoyable and easy. It uses
different styles, so everyone can understand better, and it often includes cool
interactive stuff.
Advantages of Multimedia
• Fun Entertainment:
• When we watch movies, play video games, or listen to music, we're
enjoying multimedia entertainment. It makes these things more
exciting and enjoyable.
• Helps in Marketing:
• In businesses, multimedia makes ads and presentations more
interesting and convincing, helping companies sell their products
better.
Disadvantages of Multimedia
• Cost:
• Making multimedia can be expensive because it needs special equipment and
skills. People without enough resources might find it hard to create high-
quality multimedia.
• Technical issues:
• Multimedia is complex to create and use. It needs various skills and
technologies, making it time-consuming and costly. Technical problems like
audio or video quality issues may happen, affecting how well the content
works.
• Dependence on technology:
• Multimedia relies on technology, so if it's not available or not working well,
that's a problem. Dependence on technology can limit its use in places with
limited access to technology.
Disadvantages of Multimedia
• Distraction:
• Multimedia can be distracting, and using it too much can lead to
issues like addiction and a lack of face-to-face communication
skills. This can be a problem, especially in educational settings
where focus is crucial.
• Security concerns:
• Sharing multimedia online can raise security and privacy issues.
There's a risk of security breaches and piracy, so it's important to
protect personal information and use proper security measures.

You might also like