Web Development for beginners Learn HTMLCSSJavascript step by step with this Coding Guide, Programming Guide for beginners,… (Mastery, White Belt) (Z-Library)

📄 File Format: PDF

💾 File Size: 20.8 MB

📖 Read Online ⬇️ Download

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

📄 Page 1

(This page has no text content)

📄 Page 2

(This page has no text content)

📄 Page 3

Web Development For beginners

📄 Page 4

Chapter 1: Websites Chapter 2: Understanding HTML elements, tags, and attributes Chapter 3: Paragraphs and headings <h1> and other heading tags Chapter 4: Text formatting Chapter 5: Hyperlinks Chapter 6: Images Chapter 7: Tables Chapter 8: Lists Chapter 9: Forms Chapter 10: Media Chapter 11 - Cascading style sheets Chapter 12 - Syntax and ways of using CSS Chapter 13: CSS selectors Chapter 14: CSS text and font Chapter 15 - CSS borders, margin, and padding Chapter 16 - CSS backgrounds Chapter 17 - What is JavaScript? Chapter 18 - Basics of Javascript Chapter 3 - DOM Chapter 20 - HTML events and JavaScript Chapter 21 - Finding elements Chapter 22 - Content and CSS with JavaScript Chapter 23 - Creating and removing elements

📄 Page 5

Chapter 1: Websites Today, the internet is accessible in almost every part of the world. In the last two decades, the internet and web have grown rapidly, so the websites. If you go two decades back, the websites were very different. They were not at all attractive, of course, and most importantly, they were static. By static, I mean, everything on a web page was fixed. But nowadays, websites are dynamic, generated by web applications. Static and dynamic websites In a static website, everything is fixed until someone changes it manually from behind. Such websites are created using HTML and are the most straightforward part of website development. All the users visiting a static website have the same view. But the content on a dynamic website can be different for every user. For example, amazon's homepage is a bit different for a signed-in user and a non-signed in user. If you are not signed in, you cannot see your account information, order history, and other stuff. It appears only when you sign in with your credentials. A dynamic website is linked with at least one database where all the dynamic information is stored. There is no such database in the case of static websites. User-interaction is another essential part of a dynamic website. The main focus of this book is on the development part. There are many differences. As I mentioned earlier, HTML is used to create a static website. HTML is one of the core technologies of the World Wide Web(WWW). The other two technologies are CSS and JavaScript. You can also use CSS and JavaScript on a static website to make it more attractive and a bit intractable. But the central concept, i.e. data is fixed and does not change. But using these three technologies more effectively, especially, JavaScript can create beautiful and high performing dynamic websites.

📄 Page 6

Don't worry; We will discuss all these three technologies in depth after this chapter. But before moving further, let's talk HTML, CSS, and JavaScript in brief so you can have an idea of what you are going to learn. HTML HTML stands for Hypertext Markup Language. It does not matter how big or complicated your website is going to be; you will always start with HTML. It is the standard language to create structures for the web. While CSS and Javascript have changed a lot over the years, HTML of the 1990s and 2010s is not much different. The basic structure of a web page is created using HTML. There are several HTML elements, and they are the building block of these pages. HTML elements are used in the form of tags. The tags are angular brackets with HTML names written inside them. For example, the HTML tag for image is <img/>. Most of these tags have a closing tag like <p> and </p>. However, some tags, such as <img/> does not require a closing tag. CSS and JavaScript are further applied to HTML to change its appearance and to make it dynamic, respectively. CSS Cascading Style Sheets or commonly known as CSS is the presentation part of a web page. HTML creates a structure, and CSS converts it into an attractive and more readable version. No website is complete without CSS today. Users expect a website to be appealing, engaging, and above all, properly readable. With CSS, you can change the font, color, size, positions, layouts, and many more things. There are multiple ways of using CSS in an HTML file, each having its own advantage. JavaScript

📄 Page 7

JavaScript is considered the most crucial part of a website. It is the most popular language of the year 2019 according to StackOverflow insights. Well, most of the websites you visit are created using javascript. It is a scripting language that is used on client-side as well as server-side. Earlier, javascript can only run in a browser, but with the introduction of node.js, it can run outside too. Web frameworks and libraries such as Angular, React, Vue are built using javascript. As node.js, it is also used to create backend services. Summary ● There are two types of websites - static and dynamic. ● Static websites have fixed content that does not change. ● Content in a dynamic website can change, either by users or automatically for different users. ● HTML, CSS, and JavaScript are the three core technologies of the World Wide Web(WWW). ● HTML elements are accessed using angular brackets, or commonly known as tags. These tags are used to create the structure for a web page. ● CSS is used to enhance the appearance of a web page. ● JavaScript is a scripting language that plays a vital role in developing dynamic websites. It is used for user interaction, content management, manipulating databases, and many more. Chapter 2: Understanding HTML elements, tags, and attributes As discussed in the last chapter, HTML elements are the building blocks of a web page. These elements are enclosed in angular

📄 Page 8

brackets. Many HTML tags have corresponding closing tags. There are also a few tags that do not require such closing tags. We will discuss all these tags in the upcoming chapter, but first, you need to understand how HTML tags work. Basic HTML tags Let's start with the most basic tag, i.e. <html> tag. Every HTML document starts with <html> tag and ends with its corresponding closing tag, </html> tag. Other HTML tags are nested inside this tag only. Other two basic HTML tags are <head> and <body> tags. HTML files can render in a browser. The visible part in the browser window is written inside the <body> tag. It can contain several elements, such as paragraphs, headings, images, videos, sections, divisions, etc. Another basic tag is the <head> tag. All the information regarding the document is listed in the <head> tag. It include HTML tags such as <link>, <title>, <meta>, <style>, etc. In the early versions, the <head> tag was mandatory but in HTML 5, It can be omitted. This is how usually an HTML document is structured, the <head> tag first, followed by the <body> tag. HTML attributes All the HTML tags are built for a specific purpose. For example, the <p> is used to for paragraphs and <img/> is used for images. Most

📄 Page 9

of the HTML tags have additional properties or characteristics that are defined by attributes. A tag may or may not have mandatory attributes. The <img/> tag, for example, must contain src and alt attributes. Further, you can place height and width attributes, but they are not mandatory. Have a look at the below HTML code. A <img> tag is defined with two attributes - src and alt. Value for an attribute is written inside the double-quotes. As of now, these two attributes do not have any values. Closing and opening tags As I have mentioned above, Many tags have corresponding closing tags. The difference between the opening and closing tags is that the closing tag has a forward slash. Some tags such as <img/> have a forward slash within itself only. <!DOCTYPE html> You can run HTML documents in a browser. The <HTML> tag defines that, it is an HTML document. But the browser needs to interpret the type of file. The <!DOCTYPE html> is the declaration that informs the browser that it is an HTML document. <!DOCTYPE html> is not an HTML tag. You must declare it at the top of every HTML document. Also, to create an HTML file, you should save the file with the .html extension.

📄 Page 10

Summary ● The <html> tag is used to define an HTML document that contains all other tags. ● The content of an HTML document is defined inside the <body> tag. ● The <head> tag has all the information regarding the document. ● The attributes define the additional properties or characteristics for an HTML tag. ● The closing tag has a forward slash in it. ● Declare the <!DOCTYPE html> at the top and always save the file with .html extension. Chapter 3: Paragraphs and headings We can add a variety of content in an HTML document. The most common content you can find on any web page is the simple text. The text can be in any form or style. We can create paragraphs of any length, headings of any size, and you can change color, font size, font style, background-color. A paragraph in HTML is added using the <p> tag. For headings, we have multiple tags. These include <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>, each of them having a different size. <p> tag A paragraph is a block of text that is created using the <p> tag.

📄 Page 11

It has the corresponding closing tag on line 6 while the content is written between the tags. Let's check in the browser. The content inside the tags is displayed on the browser. Let's add a couple of more paragraphs below it.

📄 Page 12

Now, there are three paragraphs in the document. Remember, each paragraph starts from a new line. Line break So each paragraph starts from a new line. But what if you want to add a new line inside a particular paragraph. Suppose we have the following text. My name is Tommy. I am 25 years old. I belong to London, England. I came to USA for higher studies. I graduated from Harvard university in 2016. The lines 6,7, and 8 have new lines. Do you think it will display correctly in the browser?

📄 Page 13

It does not display the text in the same format as written in the <p> tag. Why? The reason is simple. It does not matter how we format the text in the <p> tag. It will always consider the whole content of a <p> tag as a single paragraph. To add a new line, HTML provides the <br> tag. Just place the tag at the end of the line where you want a new line to start. You can see, the <br> tag does not have a closing tag. It is an empty tag. It does not require a closing tag. Let's see what it displays in the browser.

📄 Page 14

This is how I wanted the text. <h1> and other heading tags To give headings and subheadings, HTML provides the heading tags. They include <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. The size is the only difference between each of these tags. Lines 5 to 10 contain different types of headings.

📄 Page 15

The <h1> has the largest size while the <h6> has the smallest. These tags are meant to provide headings and subheadings in a webpage. Headings are different from paragraphs. They are bold and big. But that does not mean we should use them between paragraphs to make the text bold or big. Use these tags efficiently. Summary ● The <p> tags are used to write paragraphs. ● Each paragraph starts with a new line. ● To add a new line within a paragraph, use the <br> tag. This tag does not have any closing tag. ● There are six tags for headings. Each of them differs in size. ● Never use the heading tags between the paragraphs.

📄 Page 16

Chapter 4: Text formatting While adding text in an HTML document, you may need to define special meaning for some parts. By special meaning, I mean, pointing out a part of the text that appears different. HTML provides several tags for formatting the text. <b> and <strong> tags The <b> tag defines bold text. In the paragraph, one word, i.e. 'name' is enclosed within the <b> tag. The text enclosed within the <b> tag is bold now. Similarly, there is another tag that behaves in the same. It is called the <strong> tag.

📄 Page 17

But, the <strong> also defines that the text has extra importance. Let's see what happens when the text is enclosed within the <strong> tag. You may not find any difference between <b> and <strong>, but the strong text has an extra meaning while the bold don't. <i> and <em> tags The <i> tag defines italic text.

📄 Page 18

In the paragraph, one word, i.e. 'name' is enclosed within the <i> tag. Similarly, there is another tag, <em>, which also define italic text, but with extra importance. Let's see what happens when the text is enclosed within the <em> tag.

📄 Page 19

There does not appear any difference, but the text within the <em> tag has extra importance, similar to the <strong> tag. <small> tag Sometimes, you may need to define a text in a small size when compared to other text. The <small> tag in HTML define small text.

📄 Page 20

You can see, the word - 'name', appears smaller than the rest of the text. <del> tag Did you ever cut a word or sentence while writing? Similarly, HTML provides the <del> tag to present a deleted or removed text.