Registration for Kids: https://www.cognitoforms.com/StBonaventureChurch1/FaithFormationVBSCHILDRegistration2024 Adult Volunteers: https://www.cognitoforms.com/StBonaventureChurch1/FaithFormationVBSADULTRegistration2024 Teen Helpers: https://www.cognitoforms.com/StBonaventureChurch1/FaithFormationVBSTEENHELPERRegistration2024

Web Notes: Horizontal rules and Line breaks

Horizontal rules and Line breaks

There are two tags that can be used to control the layout of your page.

Horizontal Rule <hr>
Line break <br> -- inserts a end of line where it appear

Neither have a closing tag or associated text.

Their use is fairly straightforward.

Horizontal Rule <hr>

The <hr> has 4 attributes that may be associated with it.

The size attribute to specify thickness of line in pixels (pixels are individual dots displayed on the screen).
For example:
```
<b>2 Pixels</b><br>
<hr size=2>
<b>4 Pixels</b><br>
<hr size=4>
<b>8 Pixels</b><br>
<hr size=8>
<b>16 Pixels</b><br>
<hr size=16>
```
Which looks like this:

2 Pixels

4 Pixels
8 Pixels
16 Pixels

The align attribute can be with Horizontal Rule.

The width attribute to specify width of line in pixels or percentage of screen width.

For example:

<b>100%</b>
<hr width=100% align=left>
<br><br>
<b>75%</b>
<hr width=75%  align=left> 
<br><br>
<b>50%</b>
<hr width=50%  align=left>
<br><br>
<b>25%</b>
<hr width=25% align=left>
<br><br>
<b>10%</b>
<hr width=10%  align=left>

Which looks like this:

100%

75%

50%

25%

10%

The noshade attribute to specify that a plain black line is to be drawn as opposed to (default) 3D shading. noshade has no value assigned to it.
For example:
```
<b>Default Shaded Horizontal Rule </b>
<hr>
<br><br>
<b>No Shade Horizontal Rule </b>
<hr  noshade>
```
Which looks like this:

Default Shaded Horizontal Rule

No Shade Horizontal Rule

Putting the above together we can create so simple effects. For Example:

The HTML code to achieve this is relatively straightforward:

<HR WIDTH=40% ALIGN=CENTER>
<HR WIDTH=30% ALIGN=CENTER>
<HR WIDTH=20% ALIGN=CENTER> 
<HR WIDTH=10% ALIGN=CENTER>

<Hr color= "color_name | hex_number | rgb_number">

<hr width="500px;" color="red"

        size="10">  

<hr width="70%"
        size="20" color="blue"
        noshade>

This code creates a 3-pixel thick blue horizontal rule, the first example in the video. The rule the code creates is displayed immediately below the code box.

<hr 
   style="
      border:none;
      height:3px;
      background-color:blue;
   ">

The CSS declaration border:none; removes the border the horizontal rule would otherwise have had. Specify a border when you want a border of a different color (example in a moment).

The CSS declaration height:3px; specifies the thickness of the horizontal rule.

The CSS declaration background-color:blue; specifies the color of the horizontal rule.

Here's a border example. It creates a 1-pixel gold border for the horizontal rule (the rule displayed below the code box). Note that the thickness of the horizontal rule increases by the width of the rule top and bottom.

<hr 
   style="
      border:1px solid gold;
      height:3px;
      background-color:blue;
   ">

The second code example in the video creates a red horizontal rule, 200 pixels wide, centered in the content column. (Unless otherwise coded, horizontal rules are centered by default.)

As before, the rule is displayed below the code box.

<hr 
   style="
      border:none;
      height:3px;
      background-color:red;
      width:200px;
   ">

The CSS declaration background-color:red; specifies the color of the horizontal rule.

The CSS declaration width:200px; specifies the width of the horizontal rule.

The third and last code example in the video creates a green horizontal rule, 9 pixels thick, and aligned left in the content column. The example is displayed immediately below the code box.

<hr 
   style="
      border:none;
      height:9px;
      background-color:green;
      width:200px;
      margin:0 auto 0 0;
   ">

The CSS declaration height:9px; specifies the thickness of the horizontal rule.

The CSS declaration background-color:green; specifies the color of the horizontal rule.

The CSS declaration margin:0 auto 0 0; specifies the margins. The first 0 value specifies the top margin. The auto value specifies the right margin. And the last two 0 values specify the bottom and left values, respectively.

The right margin is the only margin specified with the auto value. Thus, the right margin pushes the horizontal as far as possible away from the right edge. The effect is a left-aligned horizontal rule.

3 of 5

Web Notes: Social Media Share Button

I put in a script to help with this. Just place in the following code and replace the URL wherever you want it to appear:

<table class="sharebuttons">
<tbody>
<tr>
<td>
<div class="fb-share-button" data-href="http://www.stbonaventure.org/headlines/724-holy-hour-adoration" data-layout="button" data-mobile-iframe="true">Share</div>
</td>
<td><a class="twitter-share-button" href="https://twitter.com/share" data-url="http://www.stbonaventure.org/headlines/724-holy-hour-adoration">Tweet</a></td>
</tr>
</tbody>
</table>

Web Notes: Span - Change Font

put this in front of the text you want to change:

and put this at the end of the text you want to change

</span>

Web Notes: Font Style & Spacing

to change the font, size and line height

<font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#3B4E61"><span style="line-height:16px">Friday, September 26, 2008</span></font>

up vot
down vote

Actually, you can achieve this pretty easy. Simply specify the line height as a number:

<pstyle="line-height:1.5"><spanstyle="font-size:12pt">The quick brown fox jumps over the lazy dog.</span><br/><spanstyle="font-size:24pt">The quick brown fox jumps over the lazy dog.</span></p>

The difference between number and percentage in the context of the line-height CSS property is that the number value is inherited by the descendant elements, but the percentage value is first computed for the current element using its font size and then this computed value is inherited by the descendant elements.

For more information about the line-height property, which indeed is far more complex than it looks like at first glance, I recommend you take a look at this online presentation.

How do I change the spacing between lines of text?

To change the spacing between lines of text, you will need to edit the HTML code. The spacing can be changed inside a single section

Note: This is an advanced topic and requires previous HTML knowledge.

To change the spacing between lines of text in a specific block:

Click on the Edit icon on the section where you want to change the line spacing.
On the left panel, click on or in the toolbar of the block, click on the HTML button.
Look for the "Line-Height" attribute in the code. If it is not in there, you can type it in.
<TD style="FONT-SIZE:13px; COLOR:#000000; LINE-HEIGHT:20px; FONT-FAMILY:Arial,Helvetica,sans-serif">
Change the Line-Height value.
Click Save & Close.

How do I get a single line space?

If you need to insert a line break, use Shift+Enter.

The Return/Enter key signifies the beginning of a new paragraph, not a new line. This is because in normal usage you do not need to create a new line because of word wrap.

To see what is happening at the Source, look at the rendered code. Whenever you use the Enter key, you will see a </p> signifying the end of a paragraph and then a <p> at the start of the new. Using Shift-Enter will give you a <br/>, which means break.

Web Notes: Styles

Paragraph Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac nisi lectus. Aliquam non faucibus lorem, vel sagittis metus. Nullam sed pretium lacus, eu euismod urna. Quisque mauris nunc, pretium nec sagittis et, faucibus eu nulla.

Bulleted List

item a
item b
item c
item d

Numbered List

item a
item b
item c
item d

Line Break without return -use </br>
so text can wrap onto the next line with no space in between the lines

Different Styles of Rules

<hr/> is for a simple line rule:

use <hr style="border top: dotted 1px;"/> and <hr/> for this type of line rule:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 6 Script1

Heading 6 Script2

Heading 6 Script3

Address Text
Lorem ipsum

this is a test	this is a test
this is a test	this is a test

dolor sit amet, consectetur adipiscing elit. Suspendisse ac nisi lectus. Aliquam non faucibus lorem, vel sagittis metus. Nullam sed pretium lacus.

Hyperlink Color

READON

BUTTON

Tables

fancytable

Contact	Fr. Bob 555-555-555 This email address is being protected from spambots. You need JavaScript enabled to view it.

equaltable

Test1

Test2

Test3

Test4

Test5

Really really really really long field. Very very long field.

flextable

Test1

Test2

Test3

Test4

Test5

Really really really really long field. Very very long field.

Documents

Limited Fonts

Paragraph - Raleway light 20px / 24px

Address - Lora regular 20px / 25px

Preformatted - Raleway 14px / 20px with gray background box

Heading 1 - Trajan Pro 3 / Cinzel 38px / 48px with double rule underline

Heading 2 - Trajan Pro 3 / Cinzel 30px / 48px

Heading 3 - Raleway Bold 20px / 25px

Heading 4 - Raleway Bold 21px / 25px with rule underline

Heading 5 - Opens Sans Regular 18px / 23px

Heading 6 - Raleway Bold 21px / 20px

Heading 6.scriptfont 1

Heading 6.scriptfont 2

Heading 6.scriptfont 3

readon

button

Style Sheets Sample

H1 style - Trajan pro 3 or Cinzel size 38px line-height 48px, double-line rule below text

H2 style - Cinzel, Size: 14pt - Our Life in Christ

H3 style - Raleway Semibold, size 14.5pt - Holy Communion

H4 style - Raleway Semibold, size 14.5pt w/ line rule underline

Paragraph style - Raleway Light, size: 14.5pt. The Sacrament of Holy Communion is the third of the Sacraments of Initiation. Even though we are required to receive Communion at least once per year (our Easter Duty), and the Church urges us to receive Communion frequently (even daily, if possible), it is called a sacrament of initiation because, like Baptism and Confirmation, it brings us into the fullness of our life in Christ

Address style - Lora size 14pt - Jesus came and stood in the midst and said to them, ‘Peace be to you!’ And when he had said this he showed them his hands and his side. The disciples therefore rejoiced at the sight of the Lord. He therefore said to them again, ‘Peace be to you!

H5 style - Open Sans Semibold, size 18px / 14.5pt. line-height: 23px - ChươngTrìnhXưngTộiRướcLễLầnÐầu đượctổchứctheo qui định của Giáo Phận Orange. ChươngTrìnhchuẩnbịđược chia thành 2 năm:

H6 style - raleway, sans serif; font-size: 18px; font-weight: semi-bold; line-height: 20px; text-align: left; white-space: nowrap; word-spacing: 0px;">font: raleway; font-weight: bold, size: 21px / 14.5pt Line-height: 20px. Chương Trình Giáo Lý Xưng Tội Rước Lễ Lần Ðầu đượctổchứctheo qui định của Giáo Phận Orange. ChươngTrìnhchuẩnbịđược chia thành 2 năm:

Limited Fonts

Paragraph - Raleway light 20px / 24px

Address - Lora regular 20px / 25px

Preformatted - Raleway 14px / 20px with gray background box

Heading 1 - Trajan Pro 3 / Cinzel 38px / 48px with double rule underline

Heading 2 - Trajan Pro 3 / Cinzel 30px / 48px

Heading 3 - Raleway Bold 20px / 25px

Heading 4 - Raleway Bold 21px / 25px with rule underline

Heading 5 - Opens Sans Regular 18px / 23px

Heading 6 - Raleway Bold 21px / 20px

Heading 6.scriptfont 1

Heading 6.scriptfont 2

Heading 6.scriptfont 3

readon

button

this is a sample of blockquote style. this is a sample of blockquote style. this is a sample of blockquote style. this is a sample of blockquote style. this is a sample of blockquote style. this is a sample of blockquote style

this is a sample of DIV

 this is a sample of pre

Paragraph - ralewaylight - regular, Size: 19.5px, Line Height: 24px. Paragraph - ralewaylight - regular, Size: 19.5px, Line Height: 24px. Paragraph - ralewaylight - regular, Size: 19.5px, Line Height: 24px.

Address - ralewaylight - regular, Size: 15px, Line Height: 20px. Address - ralewaylight - regular, Size: 15px, Line Height: 20px. Address - ralewaylight - regular, Size: 15px, Line Height: 20px. Address - ralewaylight - regular, Size: 15px, Line Height: 20px. Address - ralewaylight - regular, Size: 15px, Line Height: 20px.

Preformatted - consolas - regular, Size: 15px, Line Height: 20px, gray box background. Preformatted - consolas - regular, Size: 15px, Line Height: 20px, gray box background. Preformatted - consolas - regular, Size: 15px, Line Height: 20px, gray box background.

<H2>Heading 2 - cinzel - regular, size: 30px, line height: 42px.

<H3>Heading 3 - raleway regular - regular, size 19.5px, line height: 25.35px. Heading 3 - raleway regular - regular, size 19.5px, line height: 25.35px. Heading 3 - raleway regular - regular, size 19.5px, line height: 25.35px. Heading 3 - raleway regular - regular, size 19.5px, line height: 25.35px.

<H4>Heading4 - raleway regular - regular, size: 18px, line height, 21.6px. Heading4 - raleway regular - regular, size: 18px, line height, 21.6px.

<H5>Heading 5 - ralewayregular - regular, size 16.5pxc, line height 18.15px. Heading 5 - ralewayregular - regular, size 16.5pxc, line height 18.15px. Heading 5 - ralewayregular - regular, size 16.5pxc, line height 18.15px. Heading 5 - ralewayregular - regular, size 16.5pxc, line height 18.15px. Heading 5 - ralewayregular - regular, size 16.5pxc, line height 18.15px. Heading 5 - ralewayregular - regular, size 16.5pxc, line height 18.15px.

<H6>Heading 6 - ralewayregular - regular, size 12px, line height 20px. Heading 6 - ralewayregular - regular, size 12px, line height 20px. Heading 6 - ralewayregular - regular, size 12px, line height 20px. Heading 6 - ralewayregular - regular, size 12px, line height 20px. Heading 6 - ralewayregular - regular, size 12px, line height 20px.

<H7>Heading 7 - Lora, size 12px, line height: 14px. Serif, 19px My Jesus, I believe that You are present in the Most Holy Sacrament. I love You above all things, and I desire to receive You into my soul. Since I cannot at this moment receive You sacramentally,

<VH1> Segoe UI, size 21px (16pt), line height 23px),
<VP> Segoe UI, size 16px (12pt) line height 17px - Ðể tăng thêm hiệu quả và chuẩn bị, chương trình Giáo Lý có tổ chức những ngày Tĩnh Tâm, ngày lãnh nhận các Bí Tích và những chuẩn bị cần thiết cho việc lãnh nhận các Bí Tích. Chương trình và chi tiết được trình bày tại buổi họp phụ huynh.
<VH2>Segoe UI, size 19px (14.25pt), line height 20px - Chương Trình Xưng Tội Rước Lễ Lần Ðầu. Chương Trình Giáo Lý Xưng Tội Rước Lễ Lần Ðầu được tổ chức theo qui định của Giáo Phận Orange. Chương Trình chuẩn bị được chia thành 2 năm:

Bulleted List

item a
item b
item c
item d

Numbered List

item a
item b
item c
item d

Line Break without return -use </br>
so text can wrap onto the next line with no space in between the lines

Different Styles of Rules

<hr/> is for a simple line rule:

use <hr style="border top: dotted 1px;"/> and <hr/> for this type of line rule:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 6 Script1

Heading 6 Script2

Heading 6 Script3

Address Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac nisi lectus. Aliquam non faucibus lorem, vel sagittis metus. Nullam sed pretium lacus.

Hyperlink Color

READON

BUTTON

Tables

fancytable

Contact	Fr. Bob 555-555-555 This email address is being protected from spambots. You need JavaScript enabled to view it.

equaltable

Test1

Test2

Test3

Test4

Test5

Really really really really long field. Very very long field.

flextable

Test1

Test2

Test3

Test4

Test5

Really really really really long field. Very very long field.

Documents

Web Notes: Style Sheets

<H1> Cinzel size 32px line height 52px, double line rule

Preformatted - consolas - regular, Size: 15px, Line Height: 20px, gray box background. Preformatted - consolas - regular, Size: 15px, Line Height: 20px, gray box background. Preformatted - consolas - regular, Size: 15px, Line Height: 20px, gray box background.

<H2>Heading 2 - cinzel - regular, size: 30px, line height: 42px.

<H3>Heading 3 - raleway regular - regular, size 19.5px, line height: 25.35px. Heading 3 - raleway regular - regular, size 19.5px, line height: 25.35px. Heading 3 - raleway regular - regular, size 19.5px, line height: 25.35px. Heading 3 - raleway regular - regular, size 19.5px, line height: 25.35px.

<H4>Heading4 - raleway regular - regular, size: 18px, line height, 21.6px. Heading4 - raleway regular - regular, size: 18px, line height, 21.6px.

<H5>Heading 5 - ralewayregular - regular, size 16.5pxc, line height 18.15px. Heading 5 - ralewayregular - regular, size 16.5pxc, line height 18.15px. Heading 5 - ralewayregular - regular, size 16.5pxc, line height 18.15px. Heading 5 - ralewayregular - regular, size 16.5pxc, line height 18.15px. Heading 5 - ralewayregular - regular, size 16.5pxc, line height 18.15px. Heading 5 - ralewayregular - regular, size 16.5pxc, line height 18.15px.

<H6>Heading 6 - ralewayregular - regular, size 12px, line height 20px. Heading 6 - ralewayregular - regular, size 12px, line height 20px. Heading 6 - ralewayregular - regular, size 12px, line height 20px. Heading 6 - ralewayregular - regular, size 12px, line height 20px. Heading 6 - ralewayregular - regular, size 12px, line height 20px.

Web Notes: Image Drop Shadow

To make any picture not use the drop shadow go to the HTML editor and add the words class="noborder" and it will go away.

Example:

Image with the drop shadow as normal:

To remove the drop shadow changes to:

Web Notes: Tables & Cells

<tablecellspacing=12>

<tr>

</tr>

<tr>

</tr>

<table cellspacing="10">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>

</table>

https://www.w3schools.com/tags/att_table_cellspacing.asp

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_table_cellspacing

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_cellspacing

<style>

table, th, td {

border: 1px solid black;

padding: 0px;

}

table {

border-spacing: 0px;

}

</style>

</head>

<body>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

<tr>

</tr>

</table>

CSS Table Border

When you apply CSS border code to the table element (i.e. the <table> tag), the border only appears around the actual table - not the individual cells.

Like this: <table style="border:1px solid black;">

<tr>

<th>Table Header</th><th>Table Header</th>

</tr>

<tr>

<td>Table cell 1</td><td>Table cell 2</td>

</tr>

<tr>

<td>Table cell 3</td><td>Table cell 4</td>

</tr>

</table>

Source Code

Result

Table Header	Table Header
Table cell 1	Table cell 2
Table cell 3	Table cell 4

You can also change the border style to thick, dotted, dashed, or anything that CSS understands. You can change its color too. Here's some examples:

<tr>

<th>Table Header</th><th>Table Header</th>

</tr>

<tr>

<td>Table cell 1</td><td>Table cell 2</td>

</tr>

<tr>

<td>Table cell 3</td><td>Table cell 4</td>

</tr>

</table>

Source Code

Result

Table Header	Table Header
Table cell 1	Table cell 2
Table cell 3	Table cell 4

Source Code

Result

Table Header	Table Header
Table cell 1	Table cell 2
Table cell 3	Table cell 4

Source Code

Result

Table Header	Table Header
Table cell 1	Table cell 2
Table cell 3	Table cell 4

Source Code

Result

Table Header	Table Header
Table cell 1	Table cell 2
Table cell 3	Table cell 4

<table style="border:1px dashed black;">

<tr>

<th>Table Header</th><th>Table Header</th>

</tr>

<tr>

<td>Table cell 1</td><td>Table cell 2</td>

</tr>

<tr>

<td>Table cell 3</td><td>Table cell 4</td>

</tr>

</table>

<tr>

<th>Table Header</th><th>Table Header</th>

</tr>

<tr>

<td>Table cell 1</td><td>Table cell 2</td>

</tr>

<tr>

<td>Table cell 3</td><td>Table cell 4</td>

</tr>

</table>

<tr>

<th>Table Header</th><th>Table Header</th>

</tr>

<tr>

<td>Table cell 1</td><td>Table cell 2</td>

</tr>

<tr>

<td>Table cell 3</td><td>Table cell 4</td>

</tr>

</table>

Borders on Table Cells

To the table cells within the table, you need to apply the border code against the individual table cells.

In the following example, I've applied a border against the table cells and the table header cells. I've also applied a different colored border around the table (as I did in the previous example). The different color will help distinguish between the table border and the cell borders:

<tr>

<th style="border:1px solid red;">Table Header</th><th style="border:1px solid red;">Table Header</th>

</tr>

<tr>

<td style="border:1px solid red;">Table cell 1</td><td style="border:1px solid red;">Table cell 2</td>

</tr>

<tr>

<td style="border:1px solid red;">Table cell 3</td><td style="border:1px solid red;">Table cell 4</td>

</tr>

</table>

Source Code

Result

Table Header	Table Header
Table cell 1	Table cell 2
Table cell 3	Table cell 4

Border Collapse

You can remove the space between the different borders by using the CSS border-collapse property. You can apply this property against the HTML table element.

When you apply this against the table element, you'll notice that the table border simply disappears, or "collapses". You'll also notice that the space between the cells collapse too.

Example:

<tr>

<th style="border:1px solid red;">Table Header</th><th style="border:1px solid red;">Table Header</th>

</tr>

<tr>

<td style="border:1px solid red;">Table cell 1</td><td style="border:1px solid red;">Table cell 2</td>

</tr>

<tr>

<td style="border:1px solid red;">Table cell 3</td><td style="border:1px solid red;">Table cell 4</td>

</tr>

</table>

Source Code

Result

Table Header	Table Header
Table cell 1	Table cell 2
Table cell 3	Table cell 4

Web Notes: download link

Add the code for the link. Enter the following HTML5 code for your download link. This will start the download immediately for users after they click the link. As long as the file to be downloaded is in the same folder as the HTML file, you just need to use the name and extension. If the file is located in another folder, you'll need to include the folder structure.^[1]

<!-- Uploaded file in same location as HTML file -->
<a href="examplefile.pdf" download>Link text</a>
 
<!-- Uploaded file in different location than HTML file -->
<a href="/path/to/file/examplefile2.jpg" download>Link text</a>