Search
  • bottaway7

Basics of Web Programming Class 2!!


HTML_CSS Week 2
.pdf
Download PDF • 993KB

Formatting Text

There are two different ways to format texts in HTML/CSS. You can use HTML tags or CSS styling. With these methods, you can change the style of your text. Some examples include bold, italicized, or marked (highlighted) text. 

This code:

<b>Bold text</b>
<strong>Important text</strong>
<i>Italic text</i>
<em>Emphasized text</em>
<mark>Marked text</mark>
<small>Smaller text</small>
<del>Deleted text</del>
<ins>Inserted text</ins>
<sub>Subscript text</sub>
<sup>Superscript text</sup>

Looks like:












Attributes

Attributes specify properties of your tag. Attributes are pre-defined, so you cannot come up with your own because the computer will not recognize it.


Classes and IDs

Classes and IDs are types of attributes. Classes are usually used to identify more than one element while IDs are used to identify one element or the same element that is repeatedly used. 

<div class="container">
    <h1 id="heading"></h1>
    <p id="paragraph"></p>
    <ul>
        <li></li>
        <li></li>
    </ul>
    <ol>
        <li></li>
        <li></li>
    </ol>
</div>

Here, we used a div element, which stands for 'division.' It defines a section of a page. For instance, when you want to divide up your webpage into multiple sections (e.g. heading, body, footer, etc.), you use <div> tags.

We also used ul, which stands for 'unordered list' = bullet points, and ol, which stands for 'ordered list' = numbered list (1., 2., 3., ...)

li stands for list item and is used when you want to add items to your list.


Styling

There are three ways to do style a HTML element. You can use a separate CSS file (analogous to the way you do it in codepen), the <style></style> tag in the <head> element, or the style attribute in the element. 


  • <style> tag

(see white box)

You use <style></style> tag in your head element. There's nothing different about the format of CSS you use in between <style> tags.


font-family changes the type of font you use. Here, I changed it to Helvetica.








  • style attribute

Should be in the format of:

style="property1:value1;property2:value2"








21 views

Recent Posts

See All

Web Programming Class 3

In class 3, we went over some more basics of HTML and CSS. Adding external links to your webpage <a href="google.com">LINK</a> Above code will produce a link to Google. *NOTE: codepen.io does not let

First Class (Python Section)!

It's great to be back and see all of our students (new and returning) for our fall course! In our Python section, we covered some basic but key concepts in Python, including variables, loops, conditio

Phillips Exeter Academy Girls Who Code

Phillips Exeter Academy

20 Main Street

Exeter, NH 03833

Quick Links

© 2020 by Exeter Girls Who Code

This site was designed with the
.com
website builder. Create your website today.
Start Now