Skip to main content

Posts

Showing posts from 2019

ATTRIBUTES in HTML

ATTRIBUTES:  ADDITIONAL INFORMATION ABOUT AN ELEMENT Sometimes we have HTML elements that need to have more defined information about them.  Enter " Attributes ".   Think of an HTML attribute like an adjective or an adverb.  Adjectives and adverbs describe the noun/verb.  It gives additional information.  Attributes work in a very similar way.  They give additional information about the element. Attributes are always specified in the start tag. Please take a look at the two photos below: (a) (b) In the first picture (a), you see the HTML code for the web site.  If you look at the < h1 > tag (located under the < body > tag), you see that it is the element tag for a header.   The contents in between the opening and closing < h1 > tags says "Hello World!". The picture (b) it shows how the website renders.  "HELLO WORLD!" is in a large font (because it is a header) in the default text color - black.   Now what i

BASIC HTML Body Elements That Help Make A Web Page Look The Way It Does

BODY ELEMENTS ?! Everyone has a body, and each body looks different.  The same goes for web pages.  Today we are going to talk about the basic body elements that is needed in the HTML code as well as a couple of some basic style elements. ROOT ELEMENT What is a root element? A root element is the sole parent element to all other elements in the document.  What this means is that every other element within the HTML document is going to be either a child or a grandchild of the root element.  Remember in my previous post, that HTML documents are structured like a tree .  Every tree has roots and a trunk.  Think of the root element as the trunk.  For HTML, that root element opening tag will always look like this:  <html> .  The </html> closing tag will be at the end.  Please see the picture below: HTML ELEMENTS START AND END/CLOSING TAGS :  Most  HTML elements have a start tag and an end tag with the content in between.  Look at the picture above and find the

HOW Do You Make A Webpage???

WEBPAGES, WEBPAGES, WEBPAGES Many people turn on their computer, click on their browser and "WHOALA,"  a webpage appears on their screen.  Have you ever wondered how webpages are made?  How do you make a picture the size that it is, or have a word be one color and the rest of the words another color? What about font size ?  How is that done? First, let's talk about the language you need to learn to create a webpage. Enter:  HTML HTML stands for Hyper Text Markup Language .  It is the standard markup language for creating webpages, it describes the structure of a webpage, and the HTML elements tells the browser how to display its content.  What is a markup language?   A markup language is a human readable computer language that uses tags to define elements within a document. What is an HTML element ?   An HTML element usually consists of a start tag and an end tag with the content inserted in between. Here is an example o

XPATH and XPATH Expressions In XMLLINT

XPATH And XPATH Expressions Earlier, I told you about xmllint and xmllint for html files .  Let's say you just want to parse the <span> tags within your html file or just your <span lang="el"> tags? Enter:  Xpath. Xpath is yet another option available within the xmllint language. Remember, an Xpath is used to navigate through elements and attributes in xml and html documents.  Xpath uses Xpath Expressions to select nodes or node sets within a document. Example 1 .  Looking for all of the <span> tags within an html document. xmllint -- html -- xpath " // span" StedmanLesson10.html xmllint = This tells the command line that we are going to be using the xmllint language. space = because we always have space in between commands -- = Remember, these are the two hyphen-minus characters that we need to tell the command line that we are going to use an xmllint option. html = This is the xmllint option we want to

XMLLINT for HTML: Cleaning up the HTML Code

Getting That MESS Cleaned Up! In an earlier post, we learned about xmllint .  Today, I want to talk about cleaning up the code for an HTML file. When we have an xml file, xmllint is used.  For an html file, we use the following command in the command line: xmllint --html <filename goes here>         Here is an actual command on my command line for running xmllint for my StedmanLesson10.html file. In the photo above, you see that I start off the command with xmllint. The next thing is a space and then a --html.  The two -- are two hyphen-minus characters that are used to specify long options (Basically there are options that can be used within xmllint.  The two hyphen-minus characters are saying an option is going to be used.  In this case, that option will be html - because we are going to do an xmllint on an html file). After that you see a space and then the name of the html file I want the xmllint to be done on.  The outcome o

Taking on the DOM !!!

IT'S TIME TO LEARN THE DOM 😆 Today I am tackling the DOM so the FIRST thing I did was to put on my StarWars shirt!  I am definitely going to need the Force to be with me as I learn how to access and manipulate XML and HTML in the DOM. First thing first----> What is the DOM? DOM stands for Document Object Model.  It is the browser's representation of the page in memory.  The browser creates the DOM to allow us to modify and change XML, HTML, and CSS.  If you change the DOM, you change the page (using JavaScript). WHY would we want to work in the DOM? It is a useful tool for developers because it allows  a website to be manipulated in a live environment.  Once changes made are acceptable and approved, that code that was implemented in the DOM can then be copied over to the actual XML/HTML index file.  It can then be saved and implemented so that the website will have the current changes for all end users. How do we access the DOM and how does it work? When

GIT Commands: Pull, Add, Commit, Push.....and sometimes Revert

Pull, Add, Commit, Push ...... then Repeat We talked about GIT, GIT Hub , and the three different areas GIT works in.  Now it is time to talk about some of the most used GIT commands.   I am currently working with a team on a project called Stedman.  We are all using the GIT Hub server to track our work as we make changes to the files within the Stedman project.   Many changes can be made by other members of the team, from the time I sign off to the time I sign back on.  How do I get the changes they made to a file I need to work on, onto my computer? ENTER GIT COMMANDS : 1.  The first thing I do is goto my command window on my computer and navigate to the directory where the file I want to work in is located (this will be a directory that is being tracked by GIT).   *If you need a quick refresher:  cd file_name   will take you through each of your directories until you reach your desired location.  Issuing an  ls   command will list the files (sub-di

The 3 Areas of GIT

                                    Working , Staging , and Repository There are 3 areas that GIT works    in to track, process, and deploy the files it's been pointed to.  1.  Working Area :  These are the files that I (the user) am working on in my local file system (on my local computer) that I have instructed GIT to track.   I am currently working in the ' StedmanLesson14.html ' file.  I went ahead and made some changes to this file.  GIT can always compare my ' working area ' with it's local repo (repository) and know what files have changed at any time.  If I were to do a 'git status' command on this file (check out my post on GIT commands ), GIT will me that the  ' StedmanLesson14.html ' file that is located on my local directory has been modified. See the picture below: NOTICE IN RED:  it says MODIFIED    Git is suggesting to (use a "git add" with the file name) add it to the staging area