## Archive for the ‘HTML and CSS’ Category

### Updating sites—PHP Notes

Monday, March 9th, 2020

As I mentioned in the previous posts, I’m using W3Schools to review HTML, CSS, and PHP in order to create some exercises. Here are a few things that I didn’t know about PHP or want to remind myself about.

When sending users to specific pages I often use numbers to indicate which page they should go to. Spambots will frequently put in random junk so I do some tests before I process the request. PHP has some odd behaviour with some of the functions. For example,


// Invalid calculation will return a NaN value
$x = acos(8); echo is_nan($x);     --> 1
echo var_dump($x); --> float(NAN) echo is_null($x);    --> expect 0 but get a blank line, so only works on numbers—not NAN
echo is_finite($x); --> blank line, so only works on numbers—not NAN echo is_finite("Hello"); --> Warning: is_finite() expects parameter to be a float echo is_finite(10); --> 1 echo is_infinite(10); --> expect 0 but get a blank line echo is_infinite(10e1111); --> 1 //$hello not defined
echo var_dump($hello); --> NULL echo is_nan($hello);         --> blank line
echo is_null($hello); --> 1 echo is_finite($hello);      --> 1
echo is_infinite($hello); --> expect 0 but get a blank line echo is_int($hello);         --> expect 0 but get a blank line

var_dump(is_numeric($hello)); --> bool(true) is_numeric($hello);           --> expect 0 but get a blank line


I never gave constants much thought when developing web pages, but i’m thinking that they might come in handy when making interactive games. If I access the database and grab a bunch of data that will be displayed but won’t change, it should go into a constant array which is then accessible to any function on the page. Note that both constant arrays and variables are referenced by their name without a $before the name.  define("cars", [ "Alfa Romeo", "BMW", "Toyota" ]); echo cars[0]; --> Alfa Romeo function arrayDisplay() { foreach (cars as$value) {
echo "$value "; } } arrayDisplay(); --> Alfa Romeo BMW Toyota  If you use a variable array, the array isn’t available to functions. $cars = array(
"Alfa Romeo",
"BMW",
"Toyota"
);
var_dump($cars); --> array(3) { [0]=> string(10) "Alfa Romeo" [1]=> string(3) "BMW" [2]=> string(6) "Toyota" } function arrayDisplay() { foreach ($cars as $value) { echo "$value ";
}
}
arrayDisplay(); -- > Warning: Invalid argument supplied for foreach() …


### Updating sites—CSS Notes

Sunday, March 8th, 2020

As I mentioned in the previous post, I’m using W3Schools to review HTML and CSS in order to create some exercises. Here are a few things that I didn’t know about CSS or want to remind myself about.

“Note: Remember that the height and width properties do not include padding, borders, or margins! They set the height/width of the area inside the padding, border, and margin of the element!”

Padding (outline, margins, and border) in CSS is added to the width of an element. So div { width: 300px; padding: 25px;} will have a width of 325 pixels. To keep the width at 300 px you need to add the declaration box-sizing: border-box; inside the brackets.

Occasionally I want to add whitespace and end up using &nbsp; a bunch of times. There is a descriptor, white-space: pre; that will work.

This is a paragraph that has a bunch of spaces before the last word.

There are a bunch of ways to control elements based on where they appear in relation to other elements. I haven’t made much use of these selectors, but mostly because I’m not familiar with them. You can explore them at this W3Schools page.

The column-count:n property is something I wish I had known about. It can be used to divide a div (or p) into columns.

The column-count property is something I wish I had known about. It can be used to divide a div (or p) into columns. There are also a bunch of other properties to control the look as well including: column-fill, column-gap, and column-rule-color.

Here’s another property that can come in handy in association with justify, margin-right: 20%; -webkit-hyphens: auto; -ms-hyphens: hyphens: auto. You need all three to handle different browsers.

Suppose you want to justify your text but you have a bunch of technical terms like bootstrap and alignment and javascript which sometimes mess up the justification. Then you can use -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto to clean it up a bit.

Suppose you want to justify your text but you have a bunch of technical terms like bootstrap and alignment and javascript which sometimes mess up the justification. Then you can use -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;.

I just learned about display: flex; justify-content: center; when laying out the previous two paragraphs. I first put them in a div and did a float: left and float:right to get them to display next to each other. Then I manipulated the margins to get them closer to the center. This works better and I just need to make sure there is enough padding so that they don’t brush up against each other.

### Updating sites—HTML Notes

Saturday, March 7th, 2020

It’s been a while since I have looked at the code for my websites so I popped over to W3Schools to review the HTML5 standards and tested my sites in Validator. A couple of things are different and/or I never knew.

You can use either single or double quotes in tag attributes. I prefer single quotes since I often write code in HTML and then generalize it with PHP and PHP uses double quotes in echo statements.

They recommend using <html lang=”en-US”> in the header instead of just <html lang=”en”>.

The type=”text/javascript” code in no longer used in links to javascript or for inline javascript.

By default strong and b display the same on the screen but they are semantically different. <b> is a style – we know what “bold” is supposed to look like.

<strong> however is an indication of how something should be understood. “Strong” could (and often does) mean “bold” in a browser, but it could also mean a lower tone for a speaking program like Jaws (for blind people).

The abbreviation tag <abbr title=”Abbreciation name”> is useful for screen readers and search engines but it does ODD things in WORDPRESS.

Commenting HTML can be useful for debugging and is done with <!– Write your comments here –> which can span multiple lines. Keep in mind that while the browser doesn’t display comments, they are viewable in the page source. The page source displays the comments as a single line.

It turns out that there are 140 color names in HTML5.

The draggable attribute in combination with some simple javascript can be useful if you are working on interactive games. Links and images are draggable by default which explains why you can drag them to the desktop.

If you are writing a page that test spelling, you probably want to turn off spellcheck.
<p contenteditable="true" spellcheck="false">This is a paragraph that is not spell checked.</p>

I wish more websites used tabindex when designing forms. It’s especially frustrating when you tab and go to a button instead of the next input field or when you jump around on the form.

### Using open source fonts on your web page.

Monday, June 10th, 2019

I saw a font that might be fun on a friend’s national parks website so I wrote up some notes to help them install and use it.

You can put the NationalPark folder in the root of your site. i.e. the same place that the wp-admin, wp-content, … folders are located or if you think you’ll want to use multiple fonts, create a font folder in the root.

Then add these lines to the end of your CSS file that is located in the theme that you are using. He’s using twentynineteen. It will be a different folder if you aren’t using the twentyninteen style.

/wp-content//themes/twentyninteen/style.css


@font-face {
font-family: "NationalPark";
src: url("/fonts/NationalPark/NationalPark-Regular.otf");
}

.NationalPark {
font-family: NationalPark;
}

@font-face {
font-family: "NationalParkBold";
src: url("/fonts/NationalPark/NationalPark-Heavy.otf");
}

.NationalParkBold {
font-family: NationalParkBold;
}


Call it with

<h2 class='NationalParkBold' style='font-size: 400%;'>

## Like This

or

<p class='NationalPark'>

You can also use it in paragraphs, but it doesn’t have the impact like it does with headers. This paragraph is not much different than normal san serif text.

Monday, January 23rd, 2017

WordPress automatically displays YouTube videos when you put the shared link into a post. (Leave a blank line before and after the link.)

Sometimes you want to center the video and this code will do it.


<iframe style='margin: 0 auto; display:block' width='560' height='315' src='https://www.youtube.com/embed/xnBAwUV7abA' frameborder='0' allowfullscreen></iframe>
<p class='caption'>Bruiser and Bird</p>

Bruiser and Bird

If you use the centering trick, the video won’t display in preview mode.

You can have the video start at a specific location by appending the time to the link.


https://youtu.be/xnBAwUV7abA?t=43s