1. Introduction to Web Programming

Introduction to Web Programming

Web programming, also known as web development, is the creation of dynamic web applications. It involves tasks such as creating complex web pages and setting up databases. There are two broad divisions of web programming: frontend and backend development.

HTTP and HTML

The Hypertext Transfer Protocol (HTTP) is the foundation of any data exchange on the Web. It is a protocol used for transmitting hypermedia documents, such as HTML, between browsers and servers. HTML (Hyper Text Markup Language) primarily serves to build the skeleton of a website. With HTML5, one of the significant differences is Search Engine Optimization (SEO), which is achieved through additional tags.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

CSS

CSS (Cascading Style Sheets) is used to control the style and layout of multiple webpages all at once. It handles the design, colors, and other aesthetic aspects of a website.

Index.html

The index.html file is the default or main web page of a site. Search engines look for this file to get the primary content to list your website in their search results.

HTML Tags

HTML uses tags to define elements within a web page. Some common tags include:

<head>: Contains meta-information about the HTML document and where you link to CSS files.

<body>: Contains the contents of the document, such as text, images, and so on.

<h1> to <h6>: Define HTML headings, <h1> being the largest and <h6> the smallest.

<p>: Defines a paragraph.

Here are some examples of these tags:

<html>
<head>
<title>My First HTML Page</title>
</head>

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

</html>

Block and Inline Elements

HTML elements are usually either block-level elements or inline elements.

Block-level elements form a visible block on a page. A block-level element appears on a new line following the content that precedes it. Any content that follows a block-level element also appears on a new line. Block-level elements are used to structure the document.

Inline elements do not start on a new line. They are normally contained within block-level elements, and contain data or information rather than other elements.

Live Server Extension

Live Server is a Visual Studio Code extension that launches a development local server with a live reload feature for both static and dynamic pages.

HTML Attributes

HTML tags can contain attributes. The <a> tag, for example, can have the href attribute, which indicates the link's destination.

<a href="<https://notion.so/>">Visit Notion!</a>

The target attribute specifies where to open the linked document. The target="_blank" attribute/value pair opens the document in a new tab or window.

Styling HTML

HTML elements can be styled using CSS. CSS can be applied to HTML in three ways:

Inline - by using the style attribute inside HTML elements

Internal - by using a <style> block in the <head> section of the HTML

External - by using an external CSS file

<!-- Inline Styling -->
<p style="color: red;">This is a red paragraph.</p>

<!-- Internal Styling -->
<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>

<!-- External Styling -->
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

Conclusion

Web programming involves a combination of markup languages, styling frameworks, and scripting languages. Understanding the basics of HTML, CSS, and JavaScript is essential for web programming. In the next lesson, we will delve deeper into CSS and explore how it can be effectively used to design stunning websites.

Reference

The content in this document is based on the original notes provided in Azerbaijani. For further details, you can refer to the original document using the following link:

Original Note - Azerbaijani Version