Develop yourself to build Web UIs: Part Understanding HTML
Web Development is one of the most in-demand skills today. It involves creating user-friendly and engaging websites that can be accessed via a browser. The first step in becoming a web developer is understanding HTML.
HTML (Hyper Text Markup Language) is the backbone of any web page. It’s the standard language used to structure a webpage, determining how content is displayed in browser. While the appearance of a page is decided by CSS (Cascading Style Sheets) and its functionality by JS (Javascript), HTML is responsible for the fundamental skeleton or structure.
Before diving in this part of the course, it’s important to understand famous and recurring jargons that will be used in your journey. These will help you understand the concepts as we progress (and also make it easy for the author to explain things ;-) ).
Understanding the Jargons
- Programming Language: A set of instructions written in a specific syntax (way of a programming language) that a computer can execute. Remember the computer understands only binary code (either 1 or 0), now, in order to make the computer understand the logic and also to find a trade-off, we (humans), have created a programming language such that it is easy for us to code and also for the computer to understand it.
- Compiler: A tool that translates code written in a programming language into machine language that a computer can understand and execute.
- Syntax: The rules that define the structure of a programming language. Think of it as the way words are arranged in a sentence to make sense.
- Comments: Notes within the code that explain what certain parts of the code do. Comments help other developers (or your future self) understand the logic behind your code.
-
DOM (Document Object Model): The DOM is a tree-like representation of the HTML document. Every tag in your HTML becomes a node in this tree. For example, if your HTML has a tag with a
(paragraph) inside it, the browser creates a body node with a paragraph node as its child.
-
Children: You will understand this as you progress. Elements nested within another element. For example, in HTML, a paragraph tag (
) within a div tag (
) would be considered a child of the div.- Block-level element: You will be introduced to this jargon as you progress. This term usually describes the feature of the element that it will be taking the full available width.
Firing up with HTML
HTML stands for Hyper Text Markup Language
Hyper Text: Refers to the ability of HTML to link different documents together.
Markup Language: Uses tags to annotate text, defining how it should be displayed in a browser.
Here’s the basic structure of an HTML document:
<!DOCTYPE html> <html> <head> <title>HTML Tutorial</title> </head> <body> <p>Hello, world!</p> </body> </html>Copy after loginTags: In HTML, tags are used to define elements. Tags are enclosed in angle brackets, like or
.
Elements: Consist of an opening tag and a closing tag, which may contain content. For example,
Hello, world!
is a paragraph element.
HTML Document Structure
Every HTML document follows a basic structure:
- : Declares the document type and version of HTML.
- : The root element that encloses all other HTML elements.
- : Contains meta-information about the document, such as the title and links to stylesheets.
-
: Sets the title of the webpage, displayed in the browser's title bar or tab. - : Provides metadata about the HTML document, such as character set, author, and viewport settings. It's a self-closing tag.
- : Embeds CSS code to style the HTML elements.
- <script></script>: Embeds JavaScript code for adding interactivity to the webpage.
- : Encloses the content that will be visible to users on the webpage.
Commonly Used HTML Elements
Here are some basic HTML elements you’ll use frequently:
- : Defines a paragraph.
- : A block-level element used to group other elements together.
- : An inline element used to group text for styling purposes.
-
: Represents the introductory content or navigational links of a section. -
to : Headings, with
being the highest level and
the lowest.
-
: Inserts a line break (self-closing tag — meaning there is no need to close the tag). - : Used to create an HTML form for user input.
- : Creates an input field, typically used within a form.
- : Creates a dropdown list.
- : Associates a text label with a form element.
-
: Defines a table.
-
: Defines a row in a table. -
: Defines a cell in a table row. -
: Defines a header cell in a table row. -
-
- : Defines a list item.
Creating Your First HTML File
To create an HTML file, you can use any text editor, such as Notepad or VS Code. Here’s a simple example:
- Open your text editor and type the following code:
<!DOCTYPE html> <html> <head> <title>HTML Tutorial</title> </head> <body> <h1>Example Number 1</h1> <p>Hello, world!</p> </body> </html>
Copy after login- Save the file with a .html extension (e.g., index.html)
- Open the file in your web browser to see your first HTML webpage in action!
- To inspect your code, press Ctrl + Shift + C in Google Chrome to open the Developer Tools and explore the DOM structure.
- Go to the network tab in the Developer Tools and refresh your browser tab.
You can find that there is a request in the name that you have saved as in this picture.
In the response tab, you will find the code that you have written as in the following picture
Now, what happened is that, once you opened the file you have saved as html, the computer began running the file in browser. The browser wanted something to show, so it made a request call to the file from which it was launched. The file gave the browser your code and that was found in the response section. Since it was a html file, the browser begins reading the HTML code from the top to the bottom. This process is known as parsing. During parsing, the browser encounters different HTML tags (like ,
, , etc.) and starts to build a structure called DOM based on these tags. As the browser builds the DOM, it simultaneously renders the content on your screen.
Creating a Table
Let’s take a step further by creating a simple table in HTML:
- Open the same HTML file and add the following code inside the tag:
<p>Table Example</p> <table> <tr> <th>Name</th> <th>Power</th> <th>Is Kurama Present</th> </tr> <tr> <td>Naruto</td> <td>Rasengan</td> <td>Yes</td> </tr> <tr> <td>Sasuke</td> <td>Sharingan</td> <td>No</td> </tr> </table>Copy after login- Save the file and refresh your browser to see the table displayed.
Notice the heading is being rendered by paragraph tag. Alternatively, you can also use
tag, which will center the heading of the table. Experiment with the caption tag and refresh to see the changes. Note that
tag should only be used immediately after the opening tag.
You’ve now successfully created a basic table in HTML. Feel free to experiment with additional rows and columns to get more comfortable with HTML syntax.
Conclusion
Congratulations on completing your first steps into web development with HTML! The key to mastering HTML is practice. Experiment with different elements, create your own webpages, and don’t be afraid to make mistakes — every error is a learning opportunity.
Remember, this is just the beginning. As you continue to build on this foundation, you’ll soon be able to create more complex and dynamic websites. Let’s make the web a better place, one line of code at a time.
This article is written by Anantha Krishnan, a professional with experience in both IT and Mechanical Engineering. With a background in full stack development and a passion for mechanical and electrical systems, Anantha Krishnan is now focused on creating educational content to help beginners in fields of his expertise.
The above is the detailed content of Develop yourself to build Web UIs: Part Understanding HTML. For more information, please follow other related articles on the PHP Chinese website!
Statement of this WebsiteThe content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
How to fix KB5055523 fails to install in Windows 11?4 weeks ago By DDDHow to fix KB5055518 fails to install in Windows 10?4 weeks ago By DDDRoblox: Grow A Garden - Complete Mutation Guide3 weeks ago By DDDRoblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌How to fix KB5055612 fails to install in Windows 10?3 weeks ago By DDD
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Java Tutorial
1664
14
CakePHP Tutorial
1422
52
Laravel Tutorial
1316
25
PHP Tutorial
1268
29
C# Tutorial
1240
24
See all articles
Demystifying JavaScript: What It Does and Why It Matters
Apr 09, 2025 am 12:07 AM
JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.
The Evolution of JavaScript: Current Trends and Future Prospects
Apr 10, 2025 am 09:33 AM
The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.
JavaScript Engines: Comparing Implementations
Apr 13, 2025 am 12:05 AM
Different JavaScript engines have different effects when parsing and executing JavaScript code, because the implementation principles and optimization strategies of each engine differ. 1. Lexical analysis: convert source code into lexical unit. 2. Grammar analysis: Generate an abstract syntax tree. 3. Optimization and compilation: Generate machine code through the JIT compiler. 4. Execute: Run the machine code. V8 engine optimizes through instant compilation and hidden class, SpiderMonkey uses a type inference system, resulting in different performance performance on the same code.
Python vs. JavaScript: The Learning Curve and Ease of Use
Apr 16, 2025 am 12:12 AM
Python is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.
JavaScript: Exploring the Versatility of a Web Language
Apr 11, 2025 am 12:01 AM
JavaScript is the core language of modern web development and is widely used for its diversity and flexibility. 1) Front-end development: build dynamic web pages and single-page applications through DOM operations and modern frameworks (such as React, Vue.js, Angular). 2) Server-side development: Node.js uses a non-blocking I/O model to handle high concurrency and real-time applications. 3) Mobile and desktop application development: cross-platform development is realized through ReactNative and Electron to improve development efficiency.
How to Build a Multi-Tenant SaaS Application with Next.js (Frontend Integration)
Apr 11, 2025 am 08:22 AM
This article demonstrates frontend integration with a backend secured by Permit, building a functional EdTech SaaS application using Next.js. The frontend fetches user permissions to control UI visibility and ensures API requests adhere to role-base
Building a Multi-Tenant SaaS Application with Next.js (Backend Integration)
Apr 11, 2025 am 08:23 AM
I built a functional multi-tenant SaaS application (an EdTech app) with your everyday tech tool and you can do the same. First, what’s a multi-tenant SaaS application? Multi-tenant SaaS applications let you serve multiple customers from a sing
From C/C to JavaScript: How It All Works
Apr 14, 2025 am 12:05 AM
The shift from C/C to JavaScript requires adapting to dynamic typing, garbage collection and asynchronous programming. 1) C/C is a statically typed language that requires manual memory management, while JavaScript is dynamically typed and garbage collection is automatically processed. 2) C/C needs to be compiled into machine code, while JavaScript is an interpreted language. 3) JavaScript introduces concepts such as closures, prototype chains and Promise, which enhances flexibility and asynchronous programming capabilities.
