"An Introduction to HTML"

 



What is HTML? 
  • HTML is a building language. 
  • It helps create and function web pages. 
  • Any code for a website is first written in HTML. 
  • It consists of tags, elements, and attributes.

What does HTML stand for? 

HTML stands for HyperText Markup Language.

The best way to explain HTML is to breakdown the meaning of each word.

HyperText refers to text that contains links to other texts. Every time you click on a highlighted or underlined link that takes you to another page, you are using hypertext. 

Markup refers to the special symbols that are inserted into a document to tell the web browser how to display the document data. In HTML, those could be attributes, tags, or elements.

Language refers to the idea that the code is standardized. Just like regular spoken languages, there are certain rules that everyone must follow when writing HTML. This is so that all browsers can understand and interpret the code. 

If we put these three definitions together, we could say that HTML is “a programming language that uses unique code which allows you to display linked documents in a browser”.



What are HTML Tags, Attributes, and Elements? 

They are the basis of the language HTML.

Tags: they are used to mark up the start of an HTML element and they are usually enclosed in angle brackets. An example of a tag is: <h1>.

Most tags must be opened <h1> and closed </h1> in order to function.

Attributes: they contain additional pieces of information. Attributes take the form of an opening tag and additional info is placed inside.

An example of an attribute is:

<img src="cat.jpg" alt="A photo of a cat.">

In this instance, the image source (src) and the alt text (alt) are attributes of the <img> tag.

Elements: The HTML element is everything from the start tag to the end tag:
<tagname>Everything here is HTML element..</tagname>

Examples of some HTML elements:

<h1>My First Heading</h1>
<p>My first paragraph.</p>

HTML Editors

There are many choice in the market to choose a HTML editor. Each one have their pros and cons so it is recommended to research about each and every editor to know which one suits you the best.

Common HTML Editors are:
  • Notepad
  • TextEdit
  • Visual Studio Code
  • Atom
  • Sublime
Basic HTML structure

The basic structure of HTML when writing in any editor is: 

<!DOCTYPE html>
<html>
<head>
<title>Basic structure</title>
</head>
<body>

<h1>This is a heading.</h1>
<p>This is a paragraph.</p>

</body>
</html>






Let's create a basic form using HTML

If you run the following code: 

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

You'll get: 

Where can I learn HTML in more detail?

There are numerous ways to learn HTML. The best way to learn it is to practice. Other than that, check out W3Schools for more detailed explanation on HTML!

Happy learning!

Comments

Post a Comment

Popular posts from this blog

"Design Wizardry Without the Wand (Seriously!)"

Image
  Ever scrolled through social media and envied those picture-perfect posts? The ones that scream "professional design" but whisper "secret weapon"? Drumroll please... that weapon could be in your hands right now (and it's free!). Canva: Your Gateway to Design Greatness Did you know anyone, with zero design experience, can create stunning visuals? That's the magic of Canva. This online platform is exploding in popularity, and for good reason. Here's why you should be curious: Template Bonanza: Imagine skipping the blank page dread. Canva offers a treasure trove of pre-made designs for everything from social media posts to presentations and posters. Just pick a template, customize it, and voila - design magic! From Tiny Posts to Huge Banners: No more frustration finding the perfect size. Canva has pre-sized options for all your design needs, or you can create custom dimensions for that unique project. Photos & Graphics Galore: Spruce up your desi...
Read more

"Data Analysis 101"

Image
What is Data Analysis? Data analysis is the process of inspecting, cleaning, transforming, and modeling data to discover useful information. It helps organizations make informed decisions based on insights derived from data. Why is Data Analysis Important? In our data-driven world, effective data analysis is crucial for understanding trends, improving operations, and driving strategic decision-making. It is widely used in business, healthcare, social sciences, and more. Types of Data Analysis Descriptive Analysis: Summarizes historical data to provide insights into past events. For example, average sales figures can highlight trends. Inferential Analysis: Makes inferences about a population based on sample data. It helps in hypothesis testing and predicting future trends. Predictive Analysis: Uses statistical models and machine learning techniques to forecast outcomes. For instance, it can predict customer behavior based on past purchases. Prescriptive Analysis: Recommends actions base...
Read more

"Where to start learning Java?"

Image
  Java remains one of the most popular programming languages in the world, powering everything from enterprise applications to mobile apps and web servers. Whether you're a complete novice or looking to expand your programming repertoire, learning Java can open up a world of possibilities in the software development industry. However, getting started can feel daunting with the vast array of resources available. In this beginner's guide, we'll explore some key steps and resources to kickstart your journey into the world of Java programming. Understanding the Basics: Before diving into Java, it's essential to grasp fundamental programming concepts such as variables, data types, control flow, and object-oriented programming principles. Many online platforms offer free introductory courses covering these basics, making it accessible for beginners to get started. Choose a Learning Path: Java offers versatility, with applications in various domains including web development, ...
Read more