Basic HTML Codes for Web Pages
Uploaded by
ScribdTranslationsBasic HTML Codes for Web Pages
Uploaded by
ScribdTranslations10 Basic HTML Codes for Web Pages
(with Examples)
Alejandra Rubio Bravo 07/22/2019
The secret language of technology
While you are in the process of creating your website, you may have come across terms such as HTML
editor, HTML code or HTML tags on the Internet.
While most website building platforms (like WordPress) are fairly easy to use and don't require a lot of
technical knowledge, learning more about HTML will help you understand programming concepts and
prepare you for when it's time to modify or improve the look and feel of your website.
For this reason, on this occasion we share with you some basic notions on the subject, as well as the 10
HTML codes that you should know, accompanied by examples so that you learn how to use them.
What is HTML?
The acronym HTML stands for “Hyper Text Markup Language”.
HTML codes are the universal language used to create and format websites. They work on any
operating system (Windows, Mac, Linux, etc.) and with any browser (Chrome, Explorer or Mozilla).
Although it is not a very sophisticated programming language, knowing how to use HTML allows you
to insert other more powerful codes, such as Javascript, for example. Now let's look at the basic element
of HTML syntax: tags.
HTML tags
The HTML language is made up of a system of serial tags or tags, which include instructions that
browsers translate as:
Images
Text
Hyperlinks
Word lists
Tables, etc.
Thus, for such an element to be read, the tag must have two parts: a start tag (<etiqueta> ) and a
closing one (</etiqueta> ) between dashes (< >).
For example, the tags <strong>and</strong> define bold text. If in our HTML document we write a
sentence with the following code:
<strong>This text is in bold.</strong>
The result will be:
Try it yourself! Insert the above code into an HTML viewer.
As you may have noticed, the opening tag is used to define the behavior of the content (for example,
whether a text will be bold or if it will have a specific size), and the closing tag tells the browser how far
that behavior should go. To build the “closings” you just need to add a slash (/) at the beginning of the
tag.
Remember: if you don't put the closing tag, everything you write after
the start tag will be displayed with that format.
It should be noted that not all labels necessarily need a “closure”. For example, the code<br> to
introduce line breaks is considered an “empty element” and can go by itself anywhere in the body of the
text.
When you have to create a complete website, using HTML documents will allow you to have all the
codes you are going to use on each page organized in one place. You can create this document in the
text editor of your choice (Microsoft Word or Notepad itself), and you just have to make sure to save it as
.html or another web format (it is one document per page).
Basic HTML structure
Before looking at the basic codes, you should know that the first line of your HTML document must
always contain the tag<!DOCTYPE html> . This will make your site's code readable in any browser.
Now, a well-constructed HTML document has four essential tags for the content to be distributed
correctly. These are:
1. HTML
<html>It is at the beginning of an HTML document and tells browsers that the page has HTML code so
that it can be read that way. Following the syntax of the language, the closing tag</html> will be the last
element of the document.
2. Header
<head>is the tag used for the page header. Its main function is to contain all the information about the
operation of the site. Because of this, it is an encrypted code that people who enter the page cannot see.
3. Page title
<title>is the tag that gives your site a name so that users can identify it. It is the title you can see in the
browser tabs.
4. Body
<body>is the tag that contains all the individual elements of the site. Or put another way, it includes all
the visible content on the site. Here you can insert text, images, videos or any other functionality you
want to display.
Example of the four essential tags:
<html>
<head>
<title>My example page</title>
</head>
<body>
Here goes the content
</body>
</html>
If you create an .html document with this code and open it in your browser, you'll see something like this:
With the four tags above you already have the “skeleton” of your website. The next task would be to
enter text (between the tags)<body> and</body> ) and control their labels. Let's look at the most basic
ones.
5. Titles and subtitles
<h1><h2>…<h6> They are tags that serve to add titles and subtitles to the body of the text, which helps
to prioritize the information. By the way, we recommend using the H1 tag only once within the content.
Example:
<h1>This is an H1 tag. Use it in the title.</h1>
<h2>This is an H2 tag. Use it in section headers.</h2>
<h3>This is an H3 tag. Use it in sub-sections.</h3>
<h4>This is an H4 tag. They are not used very often.</h4>
<h5>This is an H5 tag.</h5>
<h6>This is an H6 tag.</h6>
Result:
6. Paragraphs
The labels<p> and<br> They will help you organize your text into paragraphs and line breaks.
Example:
<p>Your first paragraph.</p>
<p>Your second paragraph.</p>
<p>A statement.<br>
A second statement (attached to the first).</p>
Result:
7. Images
<img>With this tag you can add images to the body of your page. Combining it with the src attribute will
allow you to specify the location where the image is located, and the alt attribute will help you give that
image a title so that search engines like Google can read it.
The structure of the attributes is as follows: first comes the word or abbreviation that defines it (in this
case src is an abbreviation for “source”), then the equal sign (=) and finally the attribute modifier in
double (“_”) or single ('_') quotes.
Example:
<img src="https://images.unsplash.com/photo-1535378917042-10a22c95931a">
Result:
8. Hyperlinks
<a>allows you to insert a hyperlink to the page.</a> For example, the link to your social networks or to
another website with which you want to connect your page.
Example:
<a href="https://mx.godaddy.com/blog">Visit the GoDaddy blog</a>
Result:
Visit the GoDaddy blog
As you may have noticed, the attribute used here was href.
9. Lists and indexes
<ol>It is used to add numbered lists and<ul> to add bullets, which improve the readability of your texts.
Example:
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
</ul>
Result:
10. Style
Although it is usually located within the label<head> , with the attribute<style> puedes definir el estilo de
tu contenido en términos de:
Color
Font size
Typography, etc.
Example:
<p style="color:red; font-size:100px">Hello World</p>
Result:
Bonus tip: Relying on HTML code from other sites can help you understand more about web design.
These are available at any time by right-clicking on a blank area and selecting “View page source.”
We hope this article has sparked your curiosity to experiment further with how these codes work, so that
you don't miss any details when you start formatting your web pages. Remember that practice makes
perfect.
If computer language is not your thing… don’t worry! For this, there are tools like GoDaddy's website
builder, where you can create your site from scratch and without needing prior programming
knowledge.
How to Become a Web Developer from
Scratch and Find a Job
Salman Ravoof, June 21, 2022
Shares
Close
If there is one job that is easy to learn without any prior experience or training, it
is web development. You can start right now, and within a few weeks or months
of study and practice, you will have a working knowledge of how to develop a
website.
The problem is knowing where to start. Anyone can know how to write a simple
line of HTML, but creating a functional website that people use is more complex.
The numerous rules of web development are also a bit more challenging.
Are you in a hurry? Save this article as a PDF.
Tired of scrolling? Download a PDF version for easy offline reading and sharing with
coworkers.
Discharge
If you're looking for resources or want to learn more about the job you're getting
into, we've rounded up the best online learning platforms, development tools,
and all the information you'll need to get started right here.
Table of contents
1. What is a web developer?
2. What does a web developer do?
3. Why become a web developer?
4. Is it difficult to become a web developer?
5. Steps to become a web developer
6. The best learning resources for web development
7. Finding a web developer job
Check out our video guide to becoming a web developer
What is a web developer?
A website can have from one person to an entire team behind it, but at the very
least it needs one web developer. These people write the code that makes a
website function and visible on the world wide web.
The main task of a web developer is to write code, which is a set of commands
and instructions written in a specific programming language. Code powers
everything in the online world, from your computer's operating system to the
backend of a website you visit.
Take a look at the Wikipedia homepage and imagine what it might cost to create
even such a simple website. A web developer set up the layout of this page, from
the sidebar to the tables and top bar. They had to set up scripts to grab snippets
from featured articles and request dynamic content from the site.
Check how Kinsta compares to the competition. Compare
A database stores these articles and their reviews, also created by a developer.
Wikipedia home page
It takes a lot of work, but it all comes together piece by piece to create a
functional website.
With the exponential rise of the Internet, programmers are in high demand and
have great job prospects. Everyone wants to have their own website, and web
developers are here to help them achieve it.
Do you want to work in web development... but don't know where to
start? 😅 This post has the best online learning platforms, web
development tools, and professional information you'll ever need ⬇️CLICK
TO TWEET
What does a web developer do?
Wondering what exactly your daily tasks are? This is the general job description
of a web developer:
Using code to create websites and prototypes
Design a visually appealing layout for a website (either from scratch or with
the help of a web designer)
Keeping websites up and running by cleaning up code and debugging errors
Create a database with SQL
Work with clients to decide the scope of the project and determine the
details of the website features and design
There are dozens of ways to specialize, which will change your job description
quite a bit. For example, you can choose to work on frontend or backend
technologies, or become a systems administrator responsible for keeping servers
running.
But in general, these are the most basic tasks you will be responsible for.
Why become a web developer?
While it may not be for everyone, web development has a low barrier to entry
and is one of the most accessible jobs you can get. Despite this, it is reasonably
well paid, and web developers are always in demand.
This is not to say that the work isn't often challenging, but the basics are learned
very quickly (and many developers like a challenge!).
Entering the ever-growing technology sector is always a good long-term option. If
you're willing and able to stick with the most popular coding languages – and in
web development, there's always a new trendy language that employers are
quick to hire for – you're almost guaranteed a steady job.
Popular Coding Languages in 2020-21
Finally, web development is a flexible job. You can work as a freelancer or in a
company for a salary. The tasks you perform and the skills or languages you focus
on are up to you.
You'll need to try programming before you can say if it's right for you, but if you
put in the effort to try coding for beginners and find that it makes sense, then
you can be a good web developer.
Salary and Demand for Web Developers
If you're thinking about becoming a web developer, it's good to know what salary
you can expect and how easy it will be to get a job.
You can check out what we've written about average web developer salary,
frontend developer salary, backend developer salary, as well as PHP developers and
WordPress developers.
But the consensus is that the average developer makes between $60,000 and
$75,000 a year.
Average base salary for developers in June 2021
Of course, your pay will depend on your level of experience, the languages and
technologies you use, and whether you are self-employed or have a permanent
job. But it's a reasonable estimate to start with.
In terms of demand, the U.S. Bureau of Labor predicts that demand for web
designers and developers will grow by 8% between 2019 and 2029. For reference,
that's twice as fast as most occupations are projected to grow on average.
U.S. Bureau of Labor Statistics on Increasing Job Opportunities for Web
Developers
Some web developer jobs are more competitive than others – positions like
frontend developer, which are much easier to get, may be lower paid and more
labor intensive to find – but the outlook is still excellent.
Is it difficult to become a web developer?
Web development is one of the easiest jobs, if you know how to program. Not
every job is for everyone, and some people may have difficulty understanding
code.
For some people, becoming a web developer will be a piece of cake. For others, it
may never fit. But for most people, a little dedication and a lot of practice will go
a long way.
The process of becoming a web developer is much less convoluted than other
jobs, and there are more paths available to take. It is also a much more flexible and
varied job, with many different specializations. So whatever your learning style or
abilities, there is something for you.
Mastering web development will require ongoing work and dedication, and it is a
challenging job that requires problem-solving skills. It's easy to learn the basics,
but expect to encounter frustrating, yet solvable, problems along the way.
Requirements to be a web developer
Curious about what it takes to become a web developer? The exact requirements
depend on your specialization. For example, a backend developer typically needs
to create and edit a database, but you can't expect the same from a frontend
developer.
Additionally, the programming languages and frameworks you know will
distinguish you as a specific type of developer.
Still, here are some skills and knowledge you'll need, regardless of specialization,
before you can call yourself a web developer:
Mastery of at least one web language. Depending on your position, you may
need to learn more.
Knowledge of other related skills (web frameworks, libraries, Git, etc.).
Problem-solving skills are required to work with and debug code.
Attention to detail to prevent failures from occurring in the first place.
Communication and team skills are essential for working with other
developers, clients, designers, and testers.
A degree of independence and being able to solve problems on your own.
Self-learning is another skill necessary for success.
Familiarity with popular web development tools is valued.
Do you need a degree to become a web developer?
Many jobs require applicants to have an associate's degree in computer science
or a similar field. Other positions may require a bachelor's degree or simply a
certification from an online course.
However, a college degree is not strictly necessary to get a job. Experience and a
complete portfolio are often much more valuable. More and more job offers are
asking for proof of experience instead of a degree.
Because this is a highly technical field with a lot of room for self-learning, it's
more important that you know how to do the job than that you're certified to do
it. That said, a degree will make things easier for you right from the start.
Self-taught developers may have a hard time landing their first job without
experience or a degree. You'll likely need to build your portfolio with DIY projects
first, or turn to freelancers to build a work history.
If you don't want a formal college degree, online certifications, such as those
offered by coding bootcamps, can be a suitable substitute.
Types of web developers
Web development is a highly specialized career. You will rarely find a person who
describes themselves simply as a “web developer.” Depending on what you do,
what part of the website you focus on, and what technologies you work with, you
can choose from a wide range of job titles.
Info
Looking for salary information? Check out the average salary for web developers.
Frontend Developer: A popular choice as the skills are easy to acquire,
frontend/client-side developers work on the public-facing website. The
chosen languages are HTML, CSS and JavaScript. Bootstrap and jQuery are
also popular technologies.
Backend Developer: These developers work with technologies such as the
server and database. No two backend developers are the same, as there
are dozens of backend programming languages. The most common choices
are Java, Ruby, PHP, Python, and MySQL.
Full-stack developer: A combination of frontend and backend developers.
They know enough languages to function on both the server and client side.
These are the three main ones, but you can specialize even further by becoming
a web engineer, security expert, WordPress developer, mobile web developer,
web app developer, etc.
Steps to become a web developer
There are several paths you can take to become a web developer, and your own
experience will present unique challenges. But generally, most web development
careers follow a similar path.
First, you have to choose how you are going to learn the development. Are you
going to go to college? What kind of degree are you going to get? A bachelor's or
master's degree related in some way to computer science is best.
If you're not going to college, will you try to get a certification? With or without
certification, are you going to take a paid or free online course? Or are you going
to teach yourself using only online resources?
Want to know how we increased our traffic by over 1000%?
Join over 20,000 people receiving our weekly newsletter with insider WordPress
tips!
Subscribe now
Once you've decided this, you'll need to choose a specialization (frontend,
backend, full-stack, etc.). You can put this off while you experiment with different
aspects of web development, but you have to make a choice before pursuing a
limited study.
The next step is what programming languages and technologies you want to
learn.
All of this can come in a different order. You can choose to specialize or go in
already knowing which languages you want to learn and then select a course
accordingly.
Once you have acquired some web development knowledge, you will need to
create some projects for your portfolio. Hands-on experience will also give you a
better idea of what to expect in a real job. Set up your first server and design a
website for yourself. A few small projects will put you on the right track.
With the knowledge you need and a good starting portfolio, you'll be ready for your
first job.
The best learning resources for web development
Ready to try web development for yourself? We've rounded up over a dozen
great resources to get you started. If you decide to teach yourself or learn online,
this is the place to start. And for those going to college, they are excellent
complements to their courses.
1. StackOverflow
StackOverflow
The first rule of being a developer is to use StackOverflow. Every developer knows
this is the place to go when you're stuck on a project. Your question has probably
already been asked and answered. If not, the community of experienced
professionals is ready to help.
While not strictly a learning resource for beginners, it will be with you every step
of the way.
2. W3Schools
W3Schools
W3Schools is a great resource for beginners that will guide you through the basics
of various web languages and standards. It's super easy to understand, even if
you're not used to coding.
3. Codecademy
Codecademy
If you need a beginner-friendly course that covers over a dozen languages and
technologies, Codecademy is the place to go. And best of all, most of the content
is free. Although there are premium features, the courses themselves are
completely free.
4. Udemy
Udemy
Do you need more advanced courses or courses for more specific skills?
https://www.udemy.com/Udemy may be the right place for you. There are
thousands of courses taught by professional instructors, and some even allow
you to become accredited.
5. GitHub Learning Lab
GitHub Learning Lab
https://kinsta.com/es/ayuda/git/Git can be very difficult to understand if you don't
have any prior technical knowledge. It's easy once you get the hang of it, but
getting over that first hurdle can be tricky. The GitHub Learning Lab guides you
through a simple, fun, and interactive tutorial.
Do you need a hosting solution that gives you a competitive advantage?
Kinsta offers you blazing speed, state-of-the-art security, and auto-
scaling. Check out our plans
6. DevKinsta
DevKinsta
Are you interested in learning WordPress development? Make DevKinsta your first
stop. It's a free development suite that makes setting up a local WordPress
server easy. Use it for testing and development and send the final result to a
Kinsta server.
7. FreeCodeCamp
FreeCodeCamp
Do you want to learn to code and get a certificate while doing it? Unlike
Codecademy, FreeCodeCamp is 100% free to join as it is a non-profit organization.
Each certification path is estimated to take around 300 hours, and you can
choose from a variety of different skills to learn.
8. DevDocs
DevDocs
Any developer knows that finding documentation for dozens of different tools can
be annoying. DevDocs is a free and open source tool that combines all this
documentation into a single, easy-to-navigate application.
9. Team Treehouse
Team Treehouse
Treehouse is a helpful resource for beginners that aims to teach you web
development and other fundamentals from scratch. The video-based learning
platform also includes interactive challenges. Although it is a premium service, it
is a great starting point for developers.
10. Coursera
Coursera
Coursera has a unique advantage over other learning platforms: You can use it to
earn both certifications and full college degrees from technical universities. It
may be cheaper than enrolling in college, but you'll learn much of the same
content and work with the same professors as college students.
Since Coursera offers both accredited and non-accredited courses, make sure
you know what you're getting into if you're aiming to earn a legitimate college
degree.
11. Egghead.io
Egghead.io
https://egghead.io/Egghead contains useful, bite-sized lessons on a variety of
development topics. There are several dozen topics to choose from, each with
more articles covering every aspect of development you can imagine. You can
also find courses offered by professional instructors.
12. CSS Tricks
CSS Tricks
Although not a series of courses, CSS-Tricks offers high-quality articles on frontend
web development. If you want to master Javascript or CSS, there is plenty of
reading material and practical articles here.
13. Udacity
Udacity
Udacity is a paid online course provider focused on technology. Along with web
development, you can take highly specialized classes such as cybersecurity, data
science, business, and many more.
14. Coding Bootcamp Programs
If you learn best through intense, information-packed programs, you may want to
look into coding bootcamps. There are coding bootcamps for beginners that will
teach you the basics, as well as programs for professionals that will keep you
sharp.
Although universities or other classes usually offer them, you can also take
bootcamps online. Some of them are paid courses and others are free. It all
depends on which one you choose.
This way of learning is much more stressful, but it can certainly be motivating if
you're struggling with code.
There are many coding bootcamps online, but you can start with HackReactor,
FullstackAcademyhttps://codesmith.io/https://www.fullstackacademy.com/online-coding-
bootcamp, and CodeSmith.
Finding a web developer job
Once you've taken a course and built a winning portfolio, it's time to go out and get
a job as a web developer.
If you have chosen to work for a company in a salaried position, the next step is
easy: Start applying! You can find job openings in your local newspaper or
through websites like Google Careers and Indeedhttps://www.indeed.com/q-Web-
Developer-jobs.html.
What if you have chosen to be self-employed? Your first step should be to create a
website that serves as your online portfolio. But customers won't come to you,
you'll have to look for them.
Sites like Upwork can be a good starting point when you need to make some
money, but the pay is usually not high.
Networking is the best way to get clients. Get involved in open source projects
that can introduce you to people who can help you land a paying job. Advertise
your business whenever you can. Don't be afraid to ask for a job.
Whether you're going freelance or looking for a traditional job, you can also
check out web development job boards.
Ready to dive into a new career field? Get started with this complete
guide ⬇️CLICK TO TWEET
Summary
Web development is a great option for people who like to try new skills and are
prepared to take their learning into their own hands. These web development
resources are all you need to get started, and many of them will continue to help
you as you become a more competent developer.
And if you're looking for an innovative, growing technology company, you're in
luck!
Do you have any other tips for becoming a web developer? Share them with us in
the comments section.
Save time, costs and maximize site performance with:
Instant help from WordPress hosting experts, 24/7.
Cloudflare Enterprise Integration.
Global audience reach with 35 data centers worldwide.
Optimization with our integrated application performance monitoring tool.
All this and much more, in a plan with no long-term contracts, assisted
migrations, and a 30-day money-back guarantee. Check out our plans or talk to
sales to find the plan that's right for you.
