Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How do I develop a webpage using HTML and CSS?
Web pages available on the internet are built with the help of HTML and made to match the aesthetics with the help of CSS. HTML offers websites a skeleton for their content. Content here could include images, urls and links whereas CSS is responsible for the visuals of a web page. But saying it and practicing it to make a real time web page are two different things.
HTML, the standard markup language, uses a hierarchical structure meaning it lets tags mark the content, even in nested form and then structurally puts it together. With the introduction of its new features, it now has semantic elements that provide better structure for the content. Lets understand the basic concepts of HTML and learn to code in it.
HTML
HTML is the building block of a webpage and provides a standard way to arrange and display content on the internet. Static web pages containing readable, resourceful and accessible content, are made with just HTML codes. HTML works on certain syntax, with the help of tags and attributes. To master the language of web development, one must familiarize themselves with these basics. Mentioned below are some basics to get started.
Syntax of HTML
Tags − Documents in the HTML format are just text files with the.html or.htm extension. Angle brackets ( >) are used to encapsulate a succession of tags. Elements and their attributes are defined by tags. A doctype declaration is normally placed at the beginning of an HTML document, followed by the tag that encloses the whole thing. The tag includes meta-data about the document, such as the character encoding and title. The tag contains the webpage's visible content. There are many other tags, like head, body, paragraph, image and many others which can be used to display in that form.
Elements − The many components of a webpage are defined by the HTML elements, which are building blocks. An opening tag, content, and a closing tag make up each one. Some items automatically close after use and don't need a closing tag. For instance, the self-closing line break element adds a line break into the text.
Attributes − Placed inside the opening tag, attributes offer more details about an element. An equals symbol (=) is used to denote the separation of each name and value pair. For instance, the anchor tag's () attribute "href" gives the URL to link to. Aspects of an element's behavior or appearance can be managed using attributes.
The building blocks of HTML are crucial for producing web pages since they serve as the basis for web development. Developers can arrange and format content so that it is properly displayed in web browsers by employing HTML tags, elements, and attributes as well as the appropriate syntax.
HTML Code
Algorithm
Start the code with <!DOCTYPE html> to declare the HTML 5 version of HTL we'll be using.
Then you can mention your meta information inside the head tag.
Body tag can hold all your content which you'd like to represent.
Example
<!DOCTYPE html> <html> <head> <title>Coding with HTML</title> </head> <body> <H1>Coding with HTML</H1> <p>Coding with HTML will provide you with structure for your web page!</p> </body> </html>
CSS
Coming to CSS, CSS is a styling tool used to style web pages according to designers needs. CSS allows for uniform styling across numerous pages by separating the display from the structure.
With CSS, you may modify a website's visual elements such as colors, fonts, layouts, backgrounds, borders, and more. It has strong selectors that let you style only certain items or groups of elements. Media queries are another feature of CSS that enables responsive design for various screen sizes.
CSS Syntax
Selectors − The HTML elements that you want to apply styles to are the focus of selectors. They specify which elements the CSS rules will apply to. Selectors may be founded on elements, classes, IDs, attributes, or connections among elements.
Properties − Properties are the visual features you can choose to design your web page. Each of these properties define a certain representation on the web page.
Values − Values specify a particular setting for a particular CSS property. For eg. Values like color name or their color code can be used to set the color of an element.
CSS comment − It is possible to add comments to CSS to explain your code for others or for future reference. Browsers ignore comments, which are used by developers to add context or notes to the CSS code.
CSS Code
Algorithm
Select the element you want to style with the help of HTML class.
Mention the color, font style and background color, and customize the web page, according to you.
Save the CSS file and see the changes.
Example
<style>
h1{
color: blueviolet;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;
background-color: black;
}
p{
color: black;
background-color: blueviolet;
}
</style>
Conclusion
Concludingly, you can develop a webpage using HTML and CSS, and the example code for that is written in this article. You should also understand the basics of both these languages to understand when to use tags, elements and attributes in HTML. In CSS, you need to keep in mind selectors to select class and various components like color, font- family and background color. Thus, it is easy to develop a web page using HTML and CSS, if you keep the syntax and concept in mind.
128 Views
