Web Designing course - HTML, CSS live classes
Dear Student! Now you can learn Web Designing course for free
Course Contents:
1)Basics & HTML - Overview
2) Basic HTML - Tags
3)HTML Formatting
4) HTML - Images, Audio, Video
5) HTML - Tables
6) HTML - Lists
7) HTML - Links
8) HTML - Frames
9) HTML - Forms
10) CSS - Overview & CSS - Syntax
11) CSS - Elements
12) CSS - Images
13) CSS - Tables
14) CSS - Lists
15) CSS - Filters
16) Blog
17) Website -
18) Website -
19) Website -
20) Assessment
Course Highlights :
1) Live class
2) Time : 9PM - 10PM (Monday to Friday)
3) througjh Freegurukul App
4) Certification
5) You can design Website and Blog after completion of course.
For more Details :
9703508488
https://vesrntechnologies.blogspot.com
App DownloadOr
htps://play.google.com/store/apps/details?id=freegurukul.org
What is a web design?
Web design refers to the design of websites that are displayed on the internet. It usually refers to the user experience aspects of website development rather than software development.
Website is a set of related web pages located under a single domain name, typically produced by a single person or organization.
WebPage : a hypertext document on the World Wide Web.
Hypertext : is text displayed on a computer display or other electronic devices with references (hyperlinks) to other text that the reader can immediately access.
Why use webpages?
A web page is often used to provide information to viewers, including pictures or videos to help illustrate important topics. A web page may also be used as a method to sell products or services to viewers.
How to create webpage?
HTML, CSS, JAVASCRIPT, JAVA, PYTHON, etc,
You must know
1) Web Browser: A web browser takes you anywhere on the internet. It retrieves information from other parts of the web and displays it on your desktop or mobile device.
2) Text Editor : A text editor is a type of computer program that edits plain text Ex: Notepad, NotePad++, Sublime Text, etc
3) URL : A (Uniform Resource Locator) is a unique identifier used to locate a resource on the Internet
4) HTTP : (Hypertext Transfer Protocol) is the set of rules for transferring files -- such as text, images, sound, video and other multimedia files -- over the web
5) WWW : commonly referred to as WWW, W3, or the Web—is a system of interconnected public webpages accessible through the Internet.
6) HTML : Hyper Text Markup Language
Q) Can I write HTML Code?
A)Yes!
Q) What softwares are required?
A) Web browser and Text Editor
Q) How can I start?
A) Just open text editor (notepad) and type the html code
<html>
<head>
<title> V e s r n </title>
</head>
<body>
Vesrn Technologies
</body>
</html>
Now! save this file like First.html in your folder (Destop, or C Drive, D Drive, etc)
Now open the folder and select the First.html, click mouse right button and point to OpenWith option, then choose any webbrowser (InternetExplorer, Google Chrome, etc)
Now a webpage will open and show the window like
I hope this tutorial will help you,
Do like, Share, Subscibe, Comment.
Q) What are the Heading Elements?
Heading elements are container elements is used to define heading on webpage. These are
1) <H1> </H1>
2) <H2> </H2>
3) <H3> </H3>
4) <H4> </H4>
5)<H5> </H5>
6)<H6> </H6>
Example:
<html>
<head>
<title> V e s r n </title>
</head>
<body>
<H1>Vesrn Technologies</H1>
</body>
</html>
try this code and observe
Q) What are the Empty elements?
A)Empty elements do not have an end tag!
Ex : <br> <hr>
Q) Can I change background color of the webpage?
A) Yes! we can apply customized background color using attributes
Q) What is attribute?
A) Attribute is a property of element, which describe height, width, color, size, etc
Q) What is the code for changing background color of the webpage?
<html>
<head>
<title> V e s r n </title>
</head>
<body bgcolor="RED">
<H1>Vesrn Technologies</H1>
</body>
</html>
bgcolor is the attribute of body element
Q) Can I apply customized color?
Yes! HTML offers HEXA Color code
A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color.
Eg: <body bgcolor = "#ff8047">
HTML Formatting
HTML Formatting is a process of formatting text for better look and feel. here are many formatting tags in HTML. These tags are used to make text bold, italicized, or underlined.
<b> | which is used to bold the text written between it. |
<strong> | which tells the browser that the text is important. |
<i> | which is used to make text italic. |
<em> | which is used to display content in italic. |
<mark> | This tag is used to highlight text. |
<u> | This tag is used to underline text written between it. |
<strike> | This tag is used to draw a strikethrough on a section of text. (Not supported in HTML5) |
<sup> | It displays the content slightly above the normal line. |
<sub> | It displays the content slightly below the normal line. |
<del> | This tag is used to display the deleted content. |
<ins> | This tag displays the content which is added |
<big> | This tag is used to increase the font size by one conventional unit. |
<small> | This tag is used to decrease the font size by one unit from base font size. |
Ex:
<b> V e s r n Technologies </b>
<u> V e s r n Technologies </u>
Q) Can I apply background Image to webpage?
A) Yes!
1) background = "image path name"
Ex: <body background="vesrn.jpg">
Q) Can I add Images to webpage?
A) Yes!
1) <img>
This is an empty element
attributes:
src = "image path"
height = "size"
width ="size"
border="size"
alt = "alternate text"
Ex: <img src="vesrn.jpg" height=100 width=100 alt="alternate text" border=5>
Excercise :
<html>
<head>
<title> Vesrn </title>
</head>
<body bgcolor="orange" >
<h1 align="center"> <font color="Blue" face="Bookman old style" size=7> Free Gurukul Education Foundation </font> </h1>
<hr color="#F7DC6F" size=10 width=10 >
<h1> <font color="cyan"> Courses </font> </h1>
Q) Can I insert spaces?
A) Yes!
-> for single space
  -> two spaces
&emps; -> four spaces
1. అమ్మ                2. Yoga <br>
     
Trainer : వేణుగోపాల్
          
   Trainer : రామారావు గారు <br>
3. చిత్రలేఖనం                  4. Microsoft Powerpoint <br>
     
Trainer : సుకన్య గారు
          
   Trainer : ప్రవీణ్ గారు
<br>
<b><i><u>M </b></i></u> usic<br>
<img src="venu.jpg" height=100 width=100 alt="Sorry Image can't display" border=3>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<hr>
<p align="center">Vesrn</p>
</body>
</html>
Hyperlinks in HTML
Hyperlinks, also known as links or anchor tags, are a fundamental feature of HTML (Hypertext Markup Language) that allow users to navigate between the web pages.
To create a hyperlink, we need to use the <a> tag. The "a" stands for "anchor".
Inside the <a> tag, we need to specify the URL of the page we want to link to using the "href" attribute.
Example:
<a href="https://vesrntechnologies.blogspot.com">Vesrn Technologies</a>
We can also create a link to another page on our own website or blog. In this case, the href attribute will be the path to the page you want to link to.
Example:
<a href="/about.htm">About Us</a>
We can also use the <a> tag to create a link to a specific section of a page, known as an anchor. To do this, you need to add a "#" symbol followed by the name of the anchor to the end of the URL.
Ex:
<a href="http://vesrntechnologies.in/page.html#section2">Go to Section 2</a>
We can add other attributes to the <a> tag to customize the appearance or behavior of the link, such as "target" to specify whether the link should open in a new window or tab:<a href="https://vesrntechnologies.blgospot.com" target="_blank">Vesrn Technolgoies in a new window</a>
Ex Code:
<html>
<head>
</head>
<body link="Green" vlink="Yellow" alink="cyan">
<h1 align="center">Vesrn Technologies</h1>
<hr>
<a href="ReneeshPhoto.jpeg">Photo</a><br>
<a href="AdmitCard.pdf">Admit Card</a><br>
<a href="Second.html" target="_blank">Second Program</a><br>
<a href="ReneeshSign.jpeg">Reneesh Sign </a><br>
<a href="Proofs.docx">Proof</a>
</body>
</html>
Scrolling Text
To create scrolling text in HTML, you can use the <marquee> tag. The <marquee> tag allows you to create a scrolling text that moves horizontally or vertically across the screen.
Here's an example of how to use the <marquee> tag:
<marquee direction="left" scrollamount="3">Vesrn Technologies</marquee>
In this example, the "direction" attribute is set to "left", which means the text will scroll from right to left. The "scrollamount" attribute is set to "3", which means the text will scroll at a speed of 3 pixels per frame.
You can also customize the behavior of the <marquee> tag by using other attributes, such as "behavior", "loop", "bgcolor", and "width".
Here's an example:
<marquee behavior="alternate" direction="up" scrollamount="5" loop="3" bgcolor="#FF0000" width="30%">Vesrn Technologies</marquee>
In this example, the "behavior" attribute is set to "alternate", which means the text will scroll up and down continuously. The "loop" attribute is set to "3", which means the animation will repeat 3 times. The "bgcolor" attribute sets the background color of the marquee to yellow, and the "width" attribute sets the width of the marquee to 80% of the screen.
Note that the <marquee> tag is deprecated in HTML5 and may not be supported by all browsers. It's recommended to use alternative methods, such as CSS animations or JavaScript, to achieve similar effects.
| Attribute | Description |
|---|---|
| width | provides the width or breadth of a marquee. For example width="10" or width="20%" |
| height | provides the height or length of a marquee. For example height="20" or height="30%" |
| direction | provides the direction or way in which your marquee will allow you to scroll. The value of this attribute can be: left, right, up or down |
| scrolldelay | provides a feature whose value will be used for delaying among each jump. |
| scrollamount | provides value for speeding the marquee feature |
| behavior | provides the scrolling type in a marquee. That scrolling can be like sliding, scrolling or alternate |
| loop | provides how many times the marquee will loop |
| bgcolor | provides a background color where the value will be either the name of the color or the hexadecimal color-code. |
| vspace | provides a vertical space and its value can be like: vspace="20" or vspace="30%" |
| hspace | provides a horizontal space and its value can be like: hspace="20" or hspace="30%" |
