Vikalp Kaushik HTML & CSS Handbook . No part of this publication may be reproduced, stored or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning, or otherwise without written permission from the publisher. It is illegal to copy this book, post it to a website, or distribute it by any other means without permission. First edition This book was professionally typeset on Reedsy Find out more at reedsy.com Contents Foreword 1. HTML Introduction 2. First Look 3. HTML Tags 4. Page Layout 5. Forms, Lists & Table 6. SEO 7. CSS Introduction 8. Getting Started 9. Colors & Backgrounds 10. CSS Box Model 11. Fonts & Display 12. Size & Positions 13. Flexbox 14. Grid & Media Query 15. Transforms, Transitions & Animations 16. Projects Also by Vikalp Kaushik Foreword Hi there! First of all, thanks for picking up a copy - you’re amazing. This book does not try to cover everything under the sun related to HTML & CSS. It focuses on the core concepts of the HTML & CSS, trying to simplify the more complex things. I wish to assist you in becoming familiar with HTML & CSS and gaining a rapid understanding of how to use this fantastic tool for creating amazing web designs. Vikalp Kaushik HTML Introduction HTML stands for Hyper Text Markup Language. HTML is the language of the web. It’s used to make web pages and pages on the internet. HTML tags are used to define the look and feel of a website. We can simply construct stunning websites if we learn these HTML tags and how to put them together! So, what’s the big deal about CSS and Java Script? HTML is used to define a page’s layout - its bare bones structure. CSS is used to provide styling to the HTML-created bare-bones page. Java Script is used to perform page layout logic, such as what occurs when a user hovers over a text, when to hide or show items, and so on. A Lovely Comparison https:// In this book, we’ll begin to learn how to create gorgeous layouts. Even Notepad may be used to create HTML. Alternatively, you can use any text editor of your choosing to make these work easier. First Look We begin by creating a file called index.html, which is a unique filename that appears when the website’s root address is typed. → Indicates that this is an HTML5 document. → an HTML page's root → This tag contains page metadata. My Website → contains title → The page's main content (rendered by the browser)

This is a heading

→ heading tag

My paragraph

→ paragraph tag A tag acts as a container for information as well as other HTML tags. Quick Points: The HTML tag has two children: the head and body tags. The majority of HTML components have an opening and closing tag, with content in between. There is no content in some HTML tags. Empty tags, such as
,

, and so on, are known as empty tags. The extension .htm or .html can be used. To inspect a website’s HTML code, utilize Chrome’s “Inspect Element” or “View Page Source” options. Comments in HTML In HTML, comments are used to indicate text that should not be parsed. They can assist in the documentation of the source code. Case Sensitivity HTML is a language that doesn’t care about case. The

and

tags are interchangeable or same. What to do now? Examine your favorite website and make a change to the displayed page, or view the page source and copy the exact lines of code. HTML Tags The page layout can be defined by adding components to the body tag. HTML Element From the first to the last tag, everything is included. → Opening tag Content → Closing tag HTML Attributes To add further information to an HTML tag, we use this, like href. Example: