Intro to Web Development and HTML
The following is is a list of key terms related to webpages and HTML. They represent the fundamental concepts that help in understanding and creating webpages and websites.
- Webpage – A single document or page within a website, typically displayed in a web browser.
- Website – A collection of interconnected webpages.
- HTML (HyperText Markup Language) – The standard language used to create and structure content on webpages.
- URI (Uniform Resource Identifier) – A unique web address that identifies a specific webpage or resource on the Internet.
- Web Browser – Software used to access and view webpages (e.g., Chrome, Firefox, Safari).
- Link (Hyperlink) – A clickable reference that leads to another webpage or resource.
- Navigation – The structure or menu used to move between different pages or sections of a website.
- HTML Tag – A code element in HTML used to define the structure and content of a webpage (e.g.,
<h1>,<p>,<a>). - CSS (Cascading Style Sheets) – A language used to style and format the layout of a webpage (e.g., fonts, colors, spacing).
- JavaScript – A programming language used to add interactivity and dynamic features to webpages.
- Web Server – A server that hosts a website and serves its webpages to users.
- HTTP/HTTPS (HyperText Transfer Protocol / Secure) – The protocol used for transmitting data between a web server and a browser.
- Metadata – Information about a webpage, such as its title, description, and keywords, often included in the
<head>section of HTML. - Responsive Design – An approach to designing webpages so they adapt to different screen sizes and devices.
- SEO (Search Engine Optimization) – The practice of optimizing a website to improve its visibility and ranking in search engine results.
- Content Management System (CMS) – A software platform that allows users to create, manage, and modify content on a website without needing to code.
The web works through a system of interconnected servers, browsers, and protocols that allow users to access and interact with websites and webpages. Here’s a simplified explanation of how it all works:
-
Requesting a Webpage: When you type a web address (URL) into your browser’s address bar and hit Enter, your browser sends a request to the web server hosting the website you want to visit. This request asks for the specific webpage or resource associated with the URL.
-
DNS Lookup: The browser first performs a DNS (Domain Name System) lookup, which translates the human-readable URL (like www.example.com ↗) into an IP address that identifies the server hosting the website. This is necessary because computers communicate using numerical IP addresses.
-
Server Response: Once the request reaches the correct web server, the server processes it and responds by sending the requested webpage’s HTML code back to the browser. The server may also send additional resources like images, CSS files, or JavaScript files that are needed to fully display the page.
-
Rendering the Page: Your browser receives the HTML code and begins rendering (displaying) the webpage. It interprets the HTML structure, applies any styles from CSS files, and runs any JavaScript to make the page interactive. This allows you to view the page, see images, navigate through links, and interact with forms or buttons.
-
HTTP/HTTPS Protocols: The communication between the browser and the server happens via a protocol called HTTP (Hypertext Transfer Protocol). If the website is secured with encryption, it uses HTTPS, which adds a layer of security by encrypting the data exchanged between the server and the browser.
-
Interactivity: If the webpage includes interactive elements like forms or buttons, the browser may send more requests to the server for additional data or actions, such as submitting a form or loading new content dynamically. JavaScript often plays a role in these interactions, enhancing the user experience without requiring a page reload.
-
Navigation and Links: Websites are made up of multiple interconnected webpages. Each page can contain links (hyperlinks) that, when clicked, send requests to the server for different pages, creating a seamless navigation experience between different sections of the website.