Scribd Logo
Upload

Welcome to Scribd!

  • HTML, CSS, and Javascript

    Uploaded by

    Rould Christian Ganzon Alerta
    45 views10 pages
    HTML is the markup language that provides the structure and layout of a web page. CSS is the design language that formats and styles HTML elements, and JavaScript adds interactivity to the page. Together, these three technologies are the building blocks of modern web development. HTML provides semantic tags for different elements like headings, paragraphs, lists, etc. CSS can then be used to change properties like colors, sizes, spacing to design the page. JavaScript adds dynamic functionality by accessing and manipulating HTML elements.

    Original Description:

    Original Title

    HTML, CSS, AND JAVASCRIPT

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    HTML is the markup language that provides the structure and layout of a web page. CSS is the design language that formats and styles HTML elements, and JavaScript adds interactivity to the page. Together, these three technologies are the building blocks of modern web development. HTML provides semantic tags for different elements like headings, paragraphs, lists, etc. CSS can then be used to change properties like colors, sizes, spacing to design the page. JavaScript adds dynamic functionality by accessing and manipulating HTML elements.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    45 views10 pages

    HTML, CSS, and Javascript

    Uploaded by

    Rould Christian Ganzon Alerta
    HTML is the markup language that provides the structure and layout of a web page. CSS is the design language that formats and styles HTML elements, and JavaScript adds interactivity to the page. Together, these three technologies are the building blocks of modern web development. HTML provides semantic tags for different elements like headings, paragraphs, lists, etc. CSS can then be used to change properties like colors, sizes, spacing to design the page. JavaScript adds dynamic functionality by accessing and manipulating HTML elements.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 10

    HTML, CSS, AND

    JAVASCRIPT
     If you are learning web development, you will come across terms like HTML, CSS, and JavaScript. These are
    often called the building blocks of the Web.

    These three tools dominate web development. Every library or tool seems to be centered around HTML, CSS,
    and JS. So if you want to become a web developer, you need to learn them well.

    You'll also discover that websites are mostly built from these three languages.
    But you're probably wondering what each one is and what it's really used for. What makes these languages so
    special and important? And what makes them so ubiquitous that you can’t help but see them in every tutorial and
    topic based on web development?

    Well, now you need wonder no more.


    In this article, I will explain the basics of what HTML, CSS, and JavaScript are, how they make the Web work,
    and what they do on their own.
     What is the Internet?
    The internet is simply a network of computers that communicate with each other to send and receive data (information).

    Each of these computers on the internet can be distinguished and located by a unique number called an IP Address. An IP
    Address looks something like this: 168.212.226.204

     What is the Web?


    The Web is a subset of the internet.

    Like every other computer network out there, the Web is made up of two main components: the web browser client and
    the web server.

    The client requests the data and the server shares or serves its data. To achieve this, the two parties have to establish an
    agreement. That agreement is called the Application Programming Interface or in short, the API.

    But this data has to be arranged and formatted into a form that's understandable by end-users who have a wide range of
    technical experiences and abilities.
     This is where HTML, CSS, JavaScript and the whole concept of web development come into play.

     What is HTML?
    HTML stands for Hyper Text Markup Language.

    Dictionary.com defines a Markup as:

    a set of detailed instructions, usually written on a manuscript to be typeset, concerning style of type, makeup of
    pages, and the like.
    So you can think of HTML as the language used for creating detailed instructions concerning style, type, format,
    structure and the makeup of a web page before it gets printed (shown to you).

    But in the context of web development, we can replace the term ‘printed’ with ‘rendered’ as a more accurate term.
     HTML helps you structure your page into elements such as paragraphs, sections,
    headings, navigation bars, and so on.

     To illustrate what a page looks like, let's create a basic HTML document:

     <!DOCTYPE html>
     <html lang="en">
     <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./styles.css">
    <title>Document</title>
    </head>
    <body>
    <h1>This is a first level heading in HTML. With CSS, I will turn this into red color</h1>
    <h2>This is a second level heading in HTML. With CSS, I will turn this into blue color</h2>
    <h3>This is a third level heading in HTML. With CSS, I will turn this into green color</h3>
    <p>This is a <em>paragragh</em> As you can see, I placed an empahisis on the word "paragraph". Now, I will change also
    the background color of the word "paragraph" to black, and its text color to green, all with just CSS.</p>
    <p>The main essence of this tutorial is to:</p>
    <ul>
    <li>Show you how to format a web document with HTML</li>
    <li>Show you how to design a web page with CSS</li>
    <li>Show you how to program a web document with JavaScript</li>
    </ul>
    <p>Next, I am going to add the following two numbers and display the result, all with JavaScript<p/>
    <p>First number:<span id= "firstNum">2</span> <br></p>
    <p>Second number: <span id= "secondNum">7</span> </p>
    <p>Therefore, the sum of the two of those numbers is: <span id= "answer">(placeholder for the
    answer)</span></p>
    <input type="button" id="sumButton" value="Click to add!">
    </body>
    </html>
    index.html
    This is how you can format and structure a document with just HTML. As you can see, this markup contains
    some web elements such as:

    Level 1 heading h1
    Level 2 heading h2
    Level 3 heading h3
    A paragraph p
    An unordered list with bullet points ul li
    A button input input
    And the whole body of the page body
    This is what that markup above renders on a web browser:
    HTML
    localhost:3000/index.html
    You can also add attributes to these elements which you can use to identify the elements and access them from
    other places in the site.

    In our example, we set the id attributes to all of the three span elements. This will help us access them from our
    JavaScript as you will see later.

    Think of this attribute the same way as your social media username. With this name, others can find you on social
    media. And someone can also refer to you or mention you with this name (you can get tagged in a post, and so
    on).
    This page is very basic and unattractive, though. If you are building anything other than a demo, you will need
    to add some basic styling to make it more presentable. And we can do exactly that with CSS.

    Want to learn more about HTML? You can start with freeCodeCamp's Responsive Web Design certification and
    this brand new full HTML course from Beau Carnes.

    What is CSS?
    While HTML is a markup language used to format/structure a web page, CSS is a design language that you use
    to make your web page look nice and presentable.

    CSS stands for Cascading Style Sheets, and you use it to improve the appearance of a web page. By adding
    thoughtful CSS styles, you make your page more attractive and pleasant for the end user to view and use.

    You might also like