Copyright © 2024 WPVOID | All Rights Reserved
Built Using WP Tools
Built Using WP Tools
Html for beginners. Is it worthy today (2024)?
Html for beginners. Is it worthy today (2024)?
Html is standard web language which is used to structure the content that we see on the web. It is the basic foundation of every webpages. It tells browsers how to display content of the web. The content like images, paragraph, heading, table list, buttons, menu and many more.
In this guide to HTML for beginners we will cover on how Html is used to create the website content, their tags, elements, attributes, tables, form. This guide will help you to create simple Html page using different features, run your code using different editor and finally preview it in your favourite browser.
Topics we covered
What is Html?
Html stands for Hyper Text Markup Language. There is debate on is HTML programming language or not? Html is markup language which has hyper text in its content, every content is markup in some places with computer understandable language.
HYPER
It means the content in the web is refer to or link to somewhere. Used to connect related items.
TEXT
Data or information of the web.
MARKUP
Predefined/ Marked on somewhere on the web. For example:
1. Images is marked using <img> tag.
2. Paragraph is marked using <p> tag.
3. Form is marked using <form> tag.
NOTE: Html have opening, closing and self tag.
LANGUAGE
A language that a computer can understand for interpretation
Basic Structure of HTML
Html used predefined tags and attributes to tell browsers how the content should be shown on the web. Some Basic predefined or you can call it standard structure of HTML. This structure is used almost every website you found on the web.
HTML
<!DOCTYPE html>
<!-- The DOCTYPE tells browser which version of html the current page is written.
The very first tag of the website -->
<html lang="en-US">
<!--It tells language of the content -->
<head>
<!-- Head tag contains meta data.
Meta data means data of the data which is not displayed in browsers.
It contains data like title of site,css styles, scripts, character set and other
meta information of the site -->
<title> First Website</title>
</head>
<body>
<!-- Body tag contains all the content of the site -->
<h1>WPVOID Heading</h1>
<!-- H1 tags used to describe the heading. -->
<p>My first paragraph.</p>
<!-- P tag used to describe the paragraph-->
</body>
</html>Tags, Elements and Attributes
Let’s see the difference between Tags, Elements and Attributes in HTML with each example.
HTML Tags
Tag can be defined as the predefined markup for the web. For example: <p> is tag. Tag normally have opening and closing tags. Some tag are self closing tag. Self closing tag means the tag which do not have closing tag.
Some example of tags are:
i) <p> </p> = Used to define paragraph
ii) <b> </b> = Used to bold the content
iii) <a> </a> = Used for anchor links
iv) <h1> </h1> = Used for heading
We can call them as ‘P’, ‘B’, ‘A’ and ‘H1’ tag respectively. They are case insensitive. You can either use lowercase or uppercase.
In Summary we can say, ‘p’ tag is used for paragraph, ‘b’ tag is used to bold the content/text, ‘a’ tag is used to link the text/content and ‘h1’ tag is used for heading.
Self Closing Tag
This type of tag do not contain closing tag. This tag may contain attributes inside it. Some example of self closing tags;
- <br> = Used to break the line
- <hr> = Used to draw horizontal line
- <img> = Used to display image in web
- <form> = Used to create form
HTML Elements
Html elements consists of opening tag, closing tag, character, content. It consists all the content present inside the tag including opening and closing. Some elements may not contain closing tag.
Some elements like <img> doesn’t contain closing tag but it contains attributes with some values inside it.
In summary we can understand elements as, overall content including tag is elements. The key difference between tag and elements is that elements contains both tag[ opening and closing ] and contents.
Html Attributes
Attributes contains more details of the elements. It always placed in the opening tag of the elements. Attributes have values which describes more of the elements. Values can be style, id’s, classes.
The images shown below describes “p” tag with attributes(class) and its value(demo). The elements is “WPVOID SITE”.
How to create and execute HTML File
- Open any code editor
- Write your HTML code
- Name that file and save it using .html, or .html extension. Mostly used extension is ” .html “
- Run/execute in your browser
HTML can be supported by Chrome, Safari, Edge/Internet Explorer, Mozilla, Opera, Brave etc.
Code Editor To Write HTML Code
There are different free code editor available where you can write your HTML code. You can write HTML code in your system editor like Notepad.
The other code editor are: Notepad++, Brackets, Sublime Text, VS Code or online code editor like W3 school, code pen etc.
Here are some screenshot of different code editor and HTML Code.
You can use those code editor to write other languages like CSS, JS, Python, React etc. Among them VS Code is mostly used editor by many developers.
History of Html
The first version of HTML was released in 1993 by Sir Timothy John Berners-Lee popularly known as Tim Berners-Lee. He is an English computer scientist also the inventor of WWW, HTML, HTTP, URL system.
| VERSION | YEAR |
| HTML 1.0 invented | 1991 |
| HTML 1.0 released | 1993 |
| HTML 2.0 published | 1995 |
| HTML 3.0 [UPDATED] | 1997 |
| HTML 4.0 released | 1999 |
| HTML 4.01 [UPDATED] | 2012 |
| HTML 5.0 [CURRENT] | 2014 |
TABLE SHOWN HTML VERSION AND YEAR
XHTML, DHTML, XML
There are many Markup language like HTML. The other markup language XHTML, DHTML and XML are old and they are rarely used in today’s modern web.
You can skip those language and just learn HTML for your web development journey. But for education purpose i will explain basic of those markup language. It’s better to explain those in html for beginners guide.
Just keep in mind that modern web technology uses HTML. The latest version is five( HTML 5).
XHTML
XHTML is short form for Extensible Hyper Text Markup Language. It is more strict than HTML.
Some features of XHTML are:
- DOCTYPE, <html>, <head>, <title> and <body> tag are mandatory
- Every elements should have opening and closing tag & it should be properly nested.
<head> …………. </head>
<body> …………. </body> - XHTML is case sensitive. All elements should be in lowercase and there should be only one root element.
Convert HTML Code into XHTML
- Add XHTML’s <!DOCTYPE> to the first line of every page.
- Add ” xmlns ” attributes to the html elements.
- Make sure all the elements and attributes are in lowercase. All elements should have closing tag.
HTML
<!--Html code displaying heading and paragraph -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<title> First Website</title>
</head>
<body>
<h1>WPVOID Heading</h1>
<p> Paragraph tag in lower and uppercase</P>
<h1> H1 Tag with with no closing tag <h1>
<H1> New H1 tag not well defined
</body>
</html>
You must have notice that it is not well managed. Some tag are uppercase, some are lowercase and some tag are not well defined. But HTML ignore this all. It is not strict than XHTML.
Here, HTML doesn’t show any error while executing this file. Now lets see same program in XHTML.
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> First Website</title>
</head>
<body>
<h1>WPVOID Heading</h1>
<p> Paragraph tag in lower and uppercase</P>
<h1> H2 Tag with with no closing tag <h1>
<H1> New H3 tag not well defined
</body>
</html>Same code but in XHTML. Now let’s see if this throw error while executing.
Here, XHTML throws error on tag which was not properly managed. So, XHTML is strict compare to HTML.
How to run XHTML file
- Write XHTML code in any code editor
- Save your code with “.xhtml” extension(DOT xhtml extension)
- Open it/ run it in any browser.
DHTML
DHTML stands for Dynamic Hyper Text Markup Language. It is a technology which combines HTML, CSS, Javascript and DOM(Document Object Model) to create dynamic content. It is used to create animated or interactive webpages. It also supports server side script or database connectivity.
The below code of DHTML contains HTML, CSS, JS in same file.
DHTML
<HTML>
<head>
<title> WPVOID SITE DEMO
</title>
</head>
<body>
<h1 onclick="this.style.color='blue'"> You are watching WPVOID Site</h1>
<script type="text/javascript">
document.write("Coding in DHTML hello");
</script>
</body>
</html> HTML, CSS and JS code inside DHTML format
XML
XML is short form for Extensible Markup Language. It was designed to store and transport data. They have one root elements and sub root elements must be enclosed inside root elements.
Features of XML elements:
- Their names are case sensitive.
- Must start with letter or underscore
- Cannot start with predefined words like xml
- Must not contain space
XML
<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>User</to>
<from>WPVOID</from>
<heading>Message from Us</heading>
<body>Hope you are having good day</body>
</note>Writing note to user from WPVOID in XML Language
Can i get a job learning HTML?
Html is the basic foundation of the web. It’s the initial path for web journey. People don’t hire just HTML Developers. But adding some more language/tools on your portfolio can be helpful to get a job.
What after HTML?
HTML is very beginning for the web development journey. HTML is the skeleton of the website. You can learn CSS for the design of the website. Learning JavaScript for the interaction or functionable of the website. Php, Node can be used for Backend part of website. MySql can be used for the database. Some framework like React or Django or Laravel can be added to your portfolio.
Content Management Tools like WordPress can be helpful. So you can this things and many more for your web development journey.
Is it worthy today (2024) ?
The website you see on the web is created using Markup language like HMTL. In this modern web tehnology HTML play important. Learning this will always be worthy. It’s even worthy after 10 years. Without any doubt you can learn HTML if you want to start your career as web development. Also keep in mind this is the start of the journey.
Hack Nasa With HTML
You must have heard it. If you haven’t, there is meme on Hacking Nasa with html. Can we really Hack Nasa with HTML? The answer is no. Then what does this mean? I will explain what does this mean.
We can edit content of any website using ‘inspect elements’. It helps to change the content of any website but only on our computer. It don’t change on server side.
How to change content of website.
Step 1: Right click on website -> Select inspect (In Windows)
Command+Option+i (in Mac)
Step 2: Click on arrow icon.
Step 3: Click on the elements you want to change
Step 4: Double click on that elements and change text
Step 5: Change the text/content. Close it by clicking cross symbol.
This is how you can change content of the website. It changes to its real information after you refresh the page. This trick can be very useful in your development process where you can view design without change the server code.
Disclaimer: Please do not use this trick to misguide the real information. Doing this may you get in trouble.
Free Guide/ Resources for HTML
There are many online blog/articles written for HTML. You can just search on web. I personally recommend using W3SCHOOLS for more guide and also recommended by many developers. You can find full details of tags, elements, form and many more features of html. Though this is not a sponsored post.
Conclusion
I hope this html for beginners guide helps you to get basic understanding of html. It’s tag, elements, attributes.Basic Structure of HTML, how to write html in code editor, best editor for you code, it’s history and many more. Learning html is always worthy and very helpful for your web development journey. Hope you find this article helpful. Wishing you best for your journey.
Cascading Style Sheets (CSS) is a fundamental technology that plays a crucial role in web development. With the introduction of CSS3, developers gained access to a plethora of new features and enhancements, allowing for more creative and responsive web design. In this guide, we’ll embark on a journey through the basics of CSS3, exploring its key features and providing hands-on examples to help you get started.
1. Understanding CSS
CSS is a stylesheet language used to describe the presentation of a document written in HTML or XML. It allows developers to control the layout, style, and appearance of web pages. CSS3 is the latest version of CSS, introducing new modules and features to enhance the styling capabilities.
2. Selectors and Declarations
Selectors are the building blocks of CSS. They define the elements to which styles will be applied. Declarations, on the other hand, consist of property-value pairs, specifying the style rules. For example:
/* Selector / h1 { / Declaration */
color: blue;
font-size: 24px;
}
3. Box Model
The CSS box model is a fundamental concept for layout design. It consists of content, padding, border, and margin. Understanding the box model is crucial for creating well-structured and visually appealing layouts. Example:
/* Box Model */
div {
width: 200px;
padding: 20px;
border: 2px solid #ccc;
margin: 10px;
}